利用官方的vuecli脚手架来搭建Vue集成开发环境

关于这些选项的含义可以参考这篇博客的内容&＃xff1a;https://www.jianshu.com/p/2769efeaa10a

我具体摘抄出来给大家解释一下&＃xff1a;

vue init webpack vuetest

Test是项目名称&＃xff0c;这个名字自己随便取。

命令输入后&＃xff0c;会进入安装阶段&＃xff0c;需要用户输入一些信息

Project name (vuetest) 项目名称&＃xff0c;可以自己指定&＃xff0c;也可直接回车&＃xff0c;按照括号中默认名字&＃xff08;注意这里的名字不能有大写字母&＃xff0c;如果有会报错Sorry, name can no longer contain capital letters&＃xff09;&＃xff0c;阮一峰老师博客为什么文件名要小写 &＃xff0c;可以参考一下。

Project description (A Vue.js project) 项目描述&＃xff0c;也可直接点击回车&＃xff0c;使用默认名字

Author (........) 作者&＃xff0c;不用说了&＃xff0c;你想输什么就输什么吧

接下来会让用户选择

Runtime &＃43; Compiler: recommended for most users 运行加编译&＃xff0c;既然已经说了推荐&＃xff0c;就选它了

Runtime-only: about 6KB lighter min&＃43;gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时&＃xff0c;已经有推荐了就选择第一个了

Install vue-router? (Y/n) 是否安装vue-router&＃xff0c;这是官方的路由&＃xff0c;大多数情况下都使用&＃xff0c;不过我的第一个项目中的路由是自己写的&＃xff0c;没有使用到官方路由&＃xff0c;因为有特殊需求&＃xff0c;也因为比较早&＃xff0c;官方尚未成熟&＃xff0c;vue-router官网 。这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码&＃xff0c;ESLint是个代码风格管理工具&＃xff0c;是用来统一代码风格的&＃xff0c;并不会影响整体的运行&＃xff0c;这也是为了多人协作&＃xff0c;新手就不用了&＃xff0c;一般项目中都会使用。ESLint官网

接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设&＃xff0c;编写vue项目时的代码风格&＃xff0c;因为我选择了使用ESLint

Standard (https://github.com/feross/standard) 标准&＃xff0c;有些看不明白&＃xff0c;什么标准呢&＃xff0c;去给提示的standardgithub地址看一下&＃xff0c; 原来时js的标准风格

AirBNB (https://github.com/airbnb/Javascript) Javascript最合理的方法&＃xff0c;这个github地址说的是Javascript最合理的方法

none (configure it yourself) 这个不用说&＃xff0c;自己定义风格

具体选择哪个因人而异吧 &＃xff0c;我选择标准风格

Setup unit tests with Karma &＃43; Mocha? (Y/n) 是否安装单元测试&＃xff0c;我选择安装

Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 &＃xff0c;我选择安装

3.进入webpack项目中更新工程依赖&＃xff0c;因为现在前端项目会有很多依赖&＃xff1a;npm install

&＃xff08;这边需要注意的是&＃xff1a;命令框得是由管理员启动的才可以&＃xff01;&＃xff01;&＃xff01;&＃xff09;

4.运行webpack项目&＃xff1a;npm run dev

5.webpack项目打包&＃xff1a;npm run build .