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 键确认选择,进入下一步
这里就是说我们在项目里面需要支持何种动态样式语言,此处提供了三个选项:
此处选择 LESS ,进入下一步:
这个选项的意思是选择规范我们代码的选项:我选的是:ESLint + Standard config
TSLint
ESLint仅具有错误预防功能
ESLint + Airbnb配置
❯ESLint+标准配置
ESLint + Prettier
按下 enter 键确认选择,进入下一步
Lint on save // 保存就检测
Lint and fix on commit // fix和commit时候检查
我选择保存就检测
按下 enter 键确认选择,进入下一步
选择单元测试工具,直接选择现在比较火的 Jest ,进入下一步:
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 }
打包上线
在开发完项目之后,就应该打包上线了。 vue-cli 也提供了打包的命令,在项目根目录下执行:
npm run build
执行完之后,可以看到在项目根目录下多出了一个 dist 目录,该目录下就是打包好的所有静态资源,直接部署到静态资源服务器就好了。
实际上,在部署的时候要注意,假设静态服务器的域名是 http://static.baidu.com
,那么对应到访问 <项目根目录>/dist/index.html
的 URL 一定要是 http://static.baidu.com/index.html
,其他的静态资源以此类推。
单元测试
执行:
npm run test