Published on

VUE-CLI快速配置

Authors
  • avatar
    Name
    Hansuku
    Twitter

VUE-CLI

vue-cli 是 vue 配置的一个手脚架,能够快速搭建项目开发环境

npm init npm install vue-cli -g

然后开始配置 VUE-CLI

vue init webpack vuecli

这里的 webpack 是可配置的,模板为

$ vue init < template-name > < project-name >

template-name 在官方 github 上有介绍,主要就是配合模板用会直接给你装一些工具,比如这里用的就是 webpack.

然后在安装中会询问几个问题:

? Project name vuecli		//项目名称
? Project description A Vue.js project  //描述
? Author Hansuku <1556207795@qq.com>	//作者
? Vue build standalone
? Install vue-router? Yes		//是否安装VUE路由
? Use ESLint to lint your code? Yes		//是否安装代码规范和错误检查工具,推荐多人协作大项目时使用
? Pick an ESLint preset Standard		//选择ESLint预设
? Setup unit tests No		//安装单元测试
? Setup e2e tests with Nightwatch? No	//是否安装e2e模拟用户工具

安装后根据提示初始化项目手脚架:

To get started:

cd vuecli npm install //这里会安装刚刚配置了并且写入在package.json的工具 npm run dev

上面npm install的时候可能会很久 可以尝试使用 cnpm 安装 安装完成后npm run dev会开始自动构建打包 然后生成本地预览 打开预览网址就就可以看到 VUE.js 的欢迎界面了

  • package.json 解读 通常在 package.json 中有三个基础变量:
    "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
	},

前两项 dev 和 start 都是指向 npm run dev,构建一个服务器运行 build 即为 webpack 打包构建

  • webpack 的配置 在安装了 webpack 的模板后常用的 webpack 模块和插件都会自己装上,正常是不需要配置的,当前版本的 webpack 配置目录在 build 下。webpack.dev.config.js 主要做服务器环境,可以在里面更改 host 地址 webpack.base.config.js 可以配置模块、插件、入口文件和出口文件、压缩方式
  • babelrc 配置 在根目录下会直接生成.babelrc,babelrc 也是配置好的 基本不用更改
  • editorconfig 配置 editorconfig 是编码方式控制
	root = true
	[*]    //对所有文件都应用规则
	charset = utf-8    //编码规则使用utf-8
	indent_style = table    //缩进用table
	indent_size = 1    //缩进数量为一个table
	end_of_line = lf    //换行符格式
	insert_final_newline = true    //在文件最后插入空行
	trim_trailing_whitespace = true    //删除尾行空格
  • npm run build 可以直接使用npm run build直接生成 dist
*/}