Vue: Vue-CLI3.0 创建项目

真实的开始需要的:
开发服务器: 需要http/https协议访问
BaBel: es6转es5,兼容2015年6月之前的浏览器
postcss less sass: 开发高效
esLint: 协作开发，代码规范

前端自动化构建工具:
webpack: 需要配置
Gulp

脚手架:
使用命令既可一键引入,版本有
Vue CLI2
Vue CLI3

安装:
npm install -g @vue/cli
条件:
node.js>8.9
卸载:
uninstall vue-cli -g
安装成功:
vue --version: 有版本既安装成功
创建项目: 会在用vscode打开的文件夹下生成,可以修改路径
vue create vue-test
注意: 项目名字中不能包含大写

询问默认(包含babel, eslint)工具还是手动选择工具，选手动

选择所需的工具(使用空格选择/取消，上下移动，回车下一步)

代码规范: 暂时选择仅防止错误

ESLint with error prevention only(只是错误而已)

ESLint + Airbnb config(名字规范)

ESLint + Standard config(标准规范)

默认

你更喜欢把配置文件放在哪里: 生成独立的配置文件

In dedicated config files(生成独立的配置文件)

In package.json(都放在package.json文件里)

Save this as a preset for future projects?(你会将此保存为预置以供将来的项目使用吗)

选择yes会让你输入保存的名字，选择no则不保存。

正在安装工具

再其他新建项目时就有刚刚保存的工具选项，配置和刚才的一样。

安装完成。

cd vue-test 进入创建项目

npm run serve 启动项目

项目地址

项目文件夹:

package.json文件: 包含项目的说明、版本、及命令脚本配置

        {
  "name": "vue-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",// 项目启动
    "build": "vue-cli-service build",// 项目压缩
    "lint": "vue-cli-service lint"// 代码规范
  },
  "dependencies": {// 运行依赖
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {// 开发依赖
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}
      

mode_modules文件夹: 存放下载的包及依赖包的地方

public文件夹: 放html的地方

src文件夹: 正式写代码的地方，入口文件是main.js

.browserslistrc文件: 浏览器的配置文件。通知需要对哪些进行兼容处理

.eslintrc.js文件: 代码规范配置

.gitignore文件: 上传到git服务器的时候忽略的文件夹，比如node_modules等

postcss.config.js文件: css后处理器的配置

babel.config.js文件: babel的配置

以上是工具的配置，需要修改的话直接修改即可。

如果要修改webpack配置，要手动在根目录下创建vue.config.js文件

        module.exports = {
// 在这里修改
}

      

如果这样修改觉得麻烦，可以使用Vue提供的命令。vue ui启动图形化界面，会在本地8000端口生成一个页面。

在这里就可以修改需要修改的webpack配置内容。