专栏首页用代码征服天下Vue CLI 3.x搭建Vue项目

Vue CLI 3.x搭建Vue项目

一、Node安装

windows  1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可。   安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功。  2. Git(命令行终端) Git官网下载安装即可。

Linux

apt-get install nodejs
node -v
apt-get install npm
npm -v

npm命令 1、得到原本的镜像地址

npm get registry

2、设置成淘宝

npm config set registry http://registry.npm.taobao.org/

3、换成原来的  

npm config set registry https://registry.npmjs.org/

二、vue-cli安装、更新

如果全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步。

npm uninstall vue-cli -g

操作如下:

可以看到我之前的版本是2.9.6,卸载成功后,vue命令便不存在了。

ps:如果有npm WARN警告,可能是coffee-script的某个依赖包改名了(coffee-script本身已经淘汰了)。

下面开始全局安装 @vue/cli(Vue CLI 3的包名称由vue-cli改成了@vue/cli):

npm install -g @vue/cli

更新:

npm update @vue/cli

查看安装成功否(有版本号就是成功,V大写)

vue -V

三、vue-cli搭建vue项目

执行如下命令即可(注意该命令跟vue-cli2.x不同)。

vue create <Project Name>  // 文件名 不支持驼峰(含大写字母)

但如果是在windows环境下直接使用 Git Bash,交互提示符并不工作,必须通过如下命令来创建项目:

winpty vue.cmd create my-project

具体操作如下:

  1. 首先,会提示你选择一个preset(预设):
  2. 如果之前配置保存过,那么有preset-config选项,可以直接用。
  3. 如果没有配置保存过,则只有两个选项:
  4. default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包。
  5. Manually select features:手动配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的npm包。

我们选择手动配置,根据你需要用方向键选择(按“空格键”选择/取消选择,A键全选/取消全选)对应功能。

为了方便稍后跟用vue-cli2.x创建的项目结构作对比,我们这边仅添加Router而不添加Vuex。

简单介绍一下各个参数含义:

? Check the features needed for your project:
>( ) Babel                              // 转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。                      
 ( ) TypeScript  // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为JavaScript在浏览器运行,目前较少人在用
 ( ) Progressive Web App (PWA) Support  // 渐进式Web应用程序
 ( ) Router                             // vue-router(vue路由)
 ( ) Vuex                               // vuex(vue的状态管理模式)
 ( ) CSS Pre-processors                 // CSS 预处理器(如:less、sass)
 ( ) Linter / Formatter                 // 代码风格检查和格式化(如:ESlint)
 ( ) Unit Testing                       // 单元测试(unit tests)
 ( ) E2E Testing                        // e2e(end to end) 测试

选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的(方便遇到问题时百度),简介如下:

① 是否使用history router:

Vue-Router利用了浏览器自身的hash模式和history模式的特性来实现前端路由(通过调用浏览器提供的接口)。 详情见Vue Router - HTML5 History 模式

② css预处理器

主要为css解决浏览器兼容、简化css代码等问题(Sass诞生于2007年,最早也是最成熟的一款css预处理器语言)。

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS  // Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)
  LESS       // Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
  Stylus     // Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。

③ ESLint 提供一个插件化的javascript代码检测工具。

bash? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier         // 使用较多

④ 何时检测

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就检测
 ( ) Lint and fix on commit          // fix和commit时候检查

⑤ 单元测试

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai  // mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
  Jest          // 安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

⑥ 如何存放配置

bash? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  // 独立文件放置
  In package.json            // 放package.json里

⑦ 是否保存本次配置(之后可以直接使用)

? Save this as a preset for future projects? (Y/n)  // y:记录本次配置,然后需要你起个名; n:不记录本次配置

搭建完成后,依次执行 cd my-projectnpm run serve 即可访问vue默认的demo页面。

参考博客:https://www.wenyuanblog.com/blogs/vue-cli3x-to-create-vue-project.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-cli 通过UI页面创建项目

    说故事的五公子
  • Java基础系列8——IO流超详细总结

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形...

    说故事的五公子
  • java运算符那些事

    &&先运算&&左边的算式,如果为假,则直接停止,后面不管有多少运算式都不再运算,如果为真则继续判断后面的式子,只有所有的条件全部成立,才会执行下面的程序

    说故事的五公子
  • vue-cli3.x 新特性及踩坑记

    vue-cli 都到 3.0.3 了,所以是时候玩转一下 vue-cli 3 的新特性了。

    夜尽天明
  • 使用Vue-cli初始化项目

    hedeqiang
  • Vue cli安装命令(笔记)

    用户3056046
  • 基于Vue-cli 快速搭建项目

    Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。

    半指温柔乐
  • vue-cli 3.0 初体验 原

    最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。

    tianyawhl
  • (Vue全家桶)Vue-cli

    安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和...

    楠楠
  • vue调试工具vue-devtools安装及使用

    用户1741436

扫码关注云+社区

领取腾讯云代金券