使用vue-cli脚手架创建vue项目

使用vue-cli脚手架创建vue项目

首先，你已经安装了node。

使用vue-cli@2 创建项目

执行 命令：

npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 ：

vue init webpack myApp //开始创建项目，项目名称myapp

 ? Project name (myApp)  --->项目名称（不能与创建项目名称相同）
 ? Project description (A Vue.js project)  ---> 项目描述 （可不填，默认A Vue.js project）
 ? ? Author (hbf <hbf@***.cn>) ---> 作者名称
 ? Vue build (Use arrow keys)  ---->build是项目打包时的命令，可通过上下键进行选择，通常选一
    Runtime + Compiler: recommended for most users     ---->翻译：运行时+编译器:推荐给大多数用户
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
   nder functions are required elsewhere        ---->翻译：仅限运行时:大约6KB的lighter min+gzip，但是模板(或任何特定于vue的HTML)只允许在.vue文件中使用——其他地方需要渲染函数
 ? Install vue-router? (Y/n) ---> 是否初始化路由，建议选y，路由是项目必备
 ? Use ESLint to lint your code? (Y/n) ---> 是否用ESLint来校验你的代码。（如果想代码更规范，可选，比如多一个或少一个空格，都是报警告信息）
 ? Set up unit tests (Y/n)  --->是否建立单元测试（感觉没太大关系，就没选）
 ? Setup e2e tests with Nightwatch? No  ---->用夜视器设置e2e测试（感觉没太大关系，就没选）
 ? ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  ---->是否创建完成后执行npm install(安装node-models），项目创建完成后必须安装，
 Yes, use NPM ---> 用npm 创建
  Yes, use Yarn    ---> 用yarn 创建（安装了yarn才能使用）
  No, I will handle that myself   ---> 自己创建

使用vue-cli@3 创建项目

执行命令 ：

npm i -g @vue/cli //全局安装vue-cli@3脚手架 ：

vue create myApp //开始创建项目，项目名称myapp

? Please pick a preset: (Use arrow keys)  ---->首先就会有三个选项
 hbf (vue-router, vuex, babel, eslint) ---->之前创建项目时保存的
  default (babel, eslint) ---->默认的。所缺的插件可以后续用到了再安装，安装命令网上一搜一堆。
  Manually select features ---->自己选择 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)   ---->项目所需要的模块  （多选，通过上下键移动，空格键选择选项）
(*) Babel
 ( ) TypeScript    --->慎重选择，一种开发语言，不懂的千万不要选。
 ( ) Progressive Web App (PWA) Support  ---->渐进式Web应用程序(PWA)支持
 ( *) Router ---> 路由
 ( *) Vuex   ---> 状态管理器
 ( *) CSS Pre-processors  --->  css预处理器，如果用less，sess等，就要选啦
 () Linter / Formatter  --->代码校验
 ( ) Unit Testing  --->单元测试
 ( ) E2E Testing  --->单元测试

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  --->路由是否使用 history模式,看项目需求的，自己写着玩的项目就随便啦

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  --->上面选了css预处理器，下面就要选处理哪种。
 Sass/SCSS (with dart-sass)  ---> dart-sass没用过
  Sass/SCSS (with node-sass)  --->sess我们一般会用node-sass
  Less
  Stylus 

? Pick a linter / formatter config: (Use arrow keys)  --->代码校验
 ESLint with error prevention only    --->ESLint只与错误预防
  ESLint + Airbnb config    --->
  ESLint + Standard config    --->ESLint + 标准配置
  ESLint + Prettier    --->严格校验，

//下面的不是太懂其中奥妙，感觉不同选择直接没太大差别，随意选择吧。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ---> 选择额外的lint功能
(*) Lint on save
 ( ) Lint and fix on commit

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)    --->配置文件房子哪个文件里
 In dedicated config files
  In package.json

? Save this as a preset for future projects? (y/N)  --->是否保存现在的配置，如果保存，下次就可以直接选择使用

等着创建就可以了。

创建完成后执行下面命令

cd myApp

如果安装时最后一项选的最后一个，这里就要执行

npm install

最后执行：

npm run dev

项目启动完成 ，在浏览器访问http://localhost:8081(根据自己的地址访问，如下图)

页面显示如下图，就说明创建成功啦