vue-cli 4.0学习创建项目

 

环境搭建

Node版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm管理多个版本的Node

查看Node.js版本

node -v

vue-cli全局安装

直接安装:

npm install -g @vue/cli

查看版本：

输入 

vue -V

搭建项目

vue create myapp

一般情况会出现两个选项（test我自己测试用的）

default 是使用默认配置

Manually select features 是自定义配置

选择 Manually select features 自己设置

)

配置路由

选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置

配置CSS预处理器

css 的预处理器我选择的是 Sass/SCSS(with node-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效

配置格式校验

选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个

配置文件

下面就是如何存放配置了，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

是否保存本次的配置

最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

创建成功

创建好之后,就cd进入文件夹,

npm run serve

启动项目

如果依赖下载失败建议删除`node_modules`文件夹重新下载

npm install 

在package.json文件下有执行的命令

开发环境

npm run serve

生产环境

npm run build

修改代码样式

npm run lint

小黑科技,输入 vue ui 可以启动vue的启动图形化界面

 

配置vue.config.js

配置项很多,可以去官网看看,我这里就不再细说了,贴一个我自己的配置.

const path = require("path");

function resolve(dir) {

return path.join(__dirname, dir);

}



module.exports = {

productionSourceMap: false,

css: {

sourceMap: true,

loaderOptions: { // 一次配置，全局使用，这个scss 因为每个文件都要引入

sass: {

prependData: `@import "@styles/global.scss";`

}

}

},

chainWebpack: config => { // 配置解析别名

config.resolve.alias

.set("@$", resolve("./src"))

.set("@assets", resolve("./src/assets/fonts"))

.set("@assetsImg", resolve("./src/assets/images"))

.set("@styles", resolve("./src/assets/styles"))

.set("@com", resolve("./src/components"));

}

};