使用Vue-cli搭建项目教程

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，Github仓库

1. 安装 Node.js
   • 首先需要安装node环境，可以直接到node官网下载安装包,安装完成后，可以命令行工具中输入 node -v 查看是否成功,不成功清除npm缓存npm cache clean重新安装.
   • 推荐使用国内淘宝镜像安装(cnpm)npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装完成后使用cnpm install -g vue-cli安装vue-cli
2. 生成项目
   • cd进入项目目录 vue init webpack VueProject
   • 配置完成后，可以看到目录下多出了一个项目文件夹cd进入vue.js 项目 cd VueProject
   • 然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖 cnpm install
   • 启动项目 npm run dev
3. 爬坑日记
   • 如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js ==> build:{assetsPublicPath: './'}
   • 建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ‘ ./ ‘（原本为 ‘ / ‘），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ‘ / ‘ 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。dev:{port: 8075}
   • 部署到github需要留意vue-router是不是使用了 history 模式，去掉即可。(原因是我在 vue-router 里使用了 mode: ‘history’ ,history 模式可以让 url 更像一个链接，然而需要后台做一些设置，page 服务不能做后台设置)
4. 打包上线部署
   • 项目开发完成之后，可以输入 npm run build 来进行打包工作
   • 打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
   • 项目上线时，只需要将 dist 文件夹放到服务器就行了。

• vuex安装到项目 npm install vuex --save