1. 安装node
端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，按提示安装即可。
2. 安装淘宝npm镜像
由于npm是国外的，使用起来比较慢，用淘宝的cnpm镜像来安装vue。淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装全局vue-cli脚手架
cnpm install --global vue-cli
刚去看了一下Vue CLI 官网(https://cli.vuejs.org/zh/guide/installation.html)上版本已经到3.x，Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。目前用旧版的还是比较多。如果想使用3.x，命令为
npm install -g @vue/cli
4.创建一个新项目
在要创建vue项目的文件夹路径下输入命令
vue init webpack vue-demo
vue-demo是项目的名字
image.png
后面几个选择是问你需要哪些工具，vue-router是一定要使用的，其他是有关语法风格检测、单元测试之类的工具。
6.进入项目文件安装依赖
cnpm install
安装完之后项目文档里就多了一个node_modules文件夹
image.png
一般将项目文件分享给其他人时，不需要拷贝node_modules文件夹；拿到项目文件重新安装更不容易报错
5. 项目运行
cnpm run dev
image.png
浏览器访问地址默认为localhost:8080，在项目文件的config/index.js中可以修改
image.png
直接在浏览器输入localhost:8080就可以打开默认的模板了
image.png
6.项目构建
cnpm run build
使用生产环境配置构建项目，构建好的文件会输出到 "dist" 目录
image.png
-
npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器(本地打开也可以)，但发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。
原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：' / ' 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：' ./ ' 斜杠前加一个点，表示同一级。如图：
image.png
2.页面可以正常打开了，但是vue-router跳转路由页面无法显示
解决方法：打开router/index.js看路由配置，添加mode这个配置即可，mode有两种模式，使用mode:'history'也可以
image.png
index: 模板
assetRoot: 打包后文件要存放的路径
assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径，
assetsPublicPath: 代表打包后，index.html里面引用资源的的相对地址
- assetsSubDirectory 和 assetsPublicPath设置详解可参考
https://juejin.im/post/5bd9838df265da393c06033a
网友评论