基于 vue-cli 初始化 Vue2 模板的项目

初始化 vue-cli 的核心步骤：

1.全局安装命令

npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。

npm config set registry https://registry.npm.taobao.org/ 设置切换淘宝镜像地址

npm config get registry 查看镜像地址

检查是否安装成功在任意小黑窗中：vue --version

如果可以看到版本号，就表示安装成功了。

2.vue-cli 创建项目

创建一个文件夹  然后小黑窗打开

小黑窗输入  vue create vuecli-demo

vue和create是命令, vuecli-demo是文件夹的名字

回车安装依赖

等待脚手架工作自动生成项目文件夹+文件， 并下载必须的第三方包。可能要花很久~~~

启动项目

小黑窗输入 cd vuecil-demo  然后在输入npm run serve

 

  打开浏览器输入上述地址

到这里你的项目就创建完成了

看看生成的项目结构吧

 

 总结步骤：

初始化 vue-cli 的核心步骤：

1. Manually select features

   • (*) Choose Vue version

   • (*) Babel

   • ( ) TypeScript

   • ( ) Progressive Web App (PWA) Support

   • (*) Router

   • (*) Vuex

   • (*) CSS Pre-processors

   • (*) Linter / Formatter

   • ( ) Unit Testing

   • ( ) E2E Testing

2. Choose a version of Vue.js that you want to start the project with (Use arrow keys)

   • 2.x

   • 3.x

3. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

   • n

4. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

   • Sass/SCSS (with dart-sass)

   • Sass/SCSS (with node-sass)

   • Less

   • Stylus

5. Pick a linter / formatter config: (Use arrow keys)

   • ESLint + Airbnb config

   • ESLint + Standard config

   • ESLint + Prettier

6. Pick additional lint features: (Press to select, to toggle all, to invert selection)

   • (*) Lint on save

   • ( ) Lint and fix on commit

7. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

   • In dedicated config files

   • In package.json

8. Save this as a preset for future projects? (y/N)

   • N

3.首次运行项目

目的：检查项目是否初始化成功。 

1. cd 项目根目录

2. npm run serve