Linux 安装npm和Vue CLI

1.安装npm
sudo apt-get install npm
测试安装是否成功: npm -v 弹出安装的版本号，即可证明安装成功

我的已经安装了。图上：

sudo npm install -g npm
更新npm到最新版

2.安装Vue CLI

1.Install:
　　sudo npm install -g @vue/cli
　　# OR
　　yarn global add @vue/cli

2.Create a project:
　　vue create my-project
　　# OR
　　vue ui

 我选择把这个项目创建在workspace下

此处有两个选择：

• default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
• Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。

如果想要更多的支持，就选择第二项：切换到第二项，按下 enter 键选中，弹出如下界面：

vue-cli 内置支持了8个功能特性，可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。

对于每一项的功能，此处做个简单描述：

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

那么基于开发常见的项目，同时兼顾项目健壮性的原则，本次选择如下特性支持：（注：空格键是选中与取消，A键是全选）

按下 enter 键确认选择，进入下一步

这里是让选择在开发 Vue 组件时，要不要使用 class 风格的写法。为了更方便地使用 TypeScript ，此处选择 Y ： 

按下 enter 键确认选择，进入下一步

这个选项的意思是要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills 

按下 enter 键确认选择，进入下一步

这个选项的意思是要不要使用 历史的路由，我选择NO

这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。

选yes的话需要服务器那边再进行设置

按下 enter 键确认选择，进入下一步

这里就是说我们在项目里面需要支持何种动态样式语言，此处提供了三个选项：

• SCSS/SASS
• LESS
• Stylus

此处选择 LESS ，进入下一步：

这个选项的意思是选择规范我们代码的选项：我选的是：ESLint + Standard config 

TSLint
   ESLint仅具有错误预防功能
   ESLint + Airbnb配置
❯ESLint+标准配置
   ESLint + Prettier

按下 enter 键确认选择，进入下一步

Lint on save // 保存就检测

Lint and fix on commit // fix和commit时候检查

我选择保存就检测

按下 enter 键确认选择，进入下一步

选择单元测试工具，直接选择现在比较火的 Jest ，进入下一步：

这一步就是要选择配置文件的位置了。对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等，同时也可以把配置信息放在 package.json 里面。

此处出于对编辑器（ Visual Studio Code ）的友好支持（编辑器一般默认会在项目根目录下寻找配置文件），选择把配置文件放在外面。

选择 In dedicated config files ，进入下一步：

问你要不要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。我选择N不记录，如果键入Y需要输入保存名字，有点麻烦。。。

11.确定后，等待下载依赖模块

 

 安装完成后就是这样：

 

 按照命令启动：

 在浏览器中访问地址打开了如下界面：

关于端口号的配置，打包之后路径的配置，图片的配置 等等.....需要在根目录下创建vue.config.js

Js代码在下面：

 1 /**
 2  * @fileOverview app配置
 3  *官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 4  * @author Franks.T.D
 5  * @date 2018/06/17
 6  */
 7 
 8 const path = require('path')
 9 const debug = process.env.NODE_ENV !== 'production'
10 const VueConf = require('./src/assets/js/libs/vue_config_class')
11 const vueConf = new VueConf(process.argv)
12 
13 console.log('')
14 console.log('本地启动或构建的文件信息 | 开始--------------------------------------------------------------')
15 console.log(vueConf.pages)
16 console.log('本地启动或构建的文件信息 | 结束--------------------------------------------------------------')
17 console.log('')
18 
19 module.exports = {
20   baseUrl: vueConf.baseUrl, // 根域上下文目录
21   outputDir: 'dist', // 构建输出目录
22   assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
23   pages: vueConf.pages,
24   lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
25   runtimeCompiler: true, // 运行时版本是否需要编译
26   transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
27   productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
28   configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
29     if (debug) { // 开发环境配置
30       config.devtool = 'cheap-module-eval-source-map'
31     } else { // 生产环境配置
32     }
33     Object.assign(config, { // 开发生产共同配置
34       resolve: {
35         alias: {
36           '@': path.resolve(__dirname, './src'),
37           '@c': path.resolve(__dirname, './src/components'),
38           'vue$': 'vue/dist/vue.esm.js'
39         }
40       }
41     })
42   },
43   chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
44     if (debug) {
45       // 本地开发配置
46     } else {
47       // 生产开发配置
48     }
49   },
50   css: { // 配置高于chainWebpack中关于css loader的配置
51     modules: true, // 是否开启支持‘foo.module.css’样式
52     extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
53     sourceMap: false, // 是否在构建样式地图，false将提高构建速度
54     loaderOptions: { // css预设器配置项
55       css: {
56         localIdentName: '[name]-[hash]',
57         camelCase: 'only'
58       },
59       stylus: {}
60     }
61   },
62   parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
63   pluginOptions: { // 第三方插件配置
64   },
65   pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
66   },
67   devServer: {
68     open: true,
69     host: '0.0.0.0',
70     port: 8080,
71     https: false,
72     hotOnly: false,
73     proxy: {
74       '/api': {
75         target: '<url>',
76         ws: true,
77         changOrigin: true
78       }
79     },
80     before: app => {}
81   }
82 }

View Code

 

 

打包上线

在开发完项目之后，就应该打包上线了。 vue-cli 也提供了打包的命令，在项目根目录下执行：

npm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。

单元测试

执行：

npm run test