Vue:vue-cli 4.0安装及项目搭建

环境搭建

1. 安装nodejs

npm install -g npm   npm自动更新到最新版本
node -v或者npm -v   查看nodejs是否安装成功

2. 配置淘宝镜像

npm config set registry https://registry.npm.taobao.org   配置淘宝镜像
npm config get registry   查看镜像地址是否设置成功

3. 配置sass地址

npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
npm config get sass_binary_site  查看是否设置成功

4. 安装脚手架

vue -V    查看是否存在vue版本
npm uninstall vue-cli -g   如是有的话，就用命令卸载
npm install --global vue-cli   安装脚手架

创建项目

1. vue create + “项目名称”；或者vue ui进行页面创建
2. 此处有两个选择：

（1）default (babel, eslint)默认套餐，提供babel和eslint支持；
（2）Manually select features自己去选择需要的功能。

##功能介绍

• TypeScript 支持使用 TypeScript 书写源码；
• Progressive Web App (PWA) Support PWA 支持；
• Router 支持 vue-router ；
• Vuex 支持 vuex ；
• CSS Pre-processors 支持 CSS 预处理器；
• Linter / Formatter 支持代码风格检查和格式化；
• Unit Testing 支持单元测试；
• E2E Testing 支持 E2E 测试；
• 我选择了Babel, Router，Vuex，CSS Pre-processors，Linter / Formatter

3. 方向键上下移动，空格选中，Enter确定；
4. 选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置;
5. css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效;
6. 选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多;
7. 然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个;
8. 如何存放配置了，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中;本着项目结构简单的想法，我选择了第二个;
9. 是否保存当前预设，下次构建无需再次配置;

10. 完成安装。

cd + 项目名称
npm run serve 启动项目