转自本人掘金https://juejin.im/post/5ad069406fb9a028d5678689
vue使用版本是2.5.2
一、安装node.js
首先需要安装node环境,可直接去node官网http://nodejs.cn/下载安装包。
安装完成后,可以在命令行工具中输入node -v
和npm -v
,如能显示版本号,则安装成功。
二、安装vue-cli
安装好node后,就可全局安装vue-cli:
npm install -g vue-cli
但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
同样可以使用cnpm -v
来检查是否安装成功,之后我们就可以用cnpm安装vue-cli
安装完成后,可以使用vue -V
(注意V大写)检测是否安装成功。
如果提示‘无法识别vue’,有可能是npm版本过低,可以使用npm install -g npm
来更新版本。
三、新建项目
- 在命令行中进入到项目目录,输入:
vue init webpack vue-project //vue-project项目名
配置完成后,可以看到目录下多了一个项目文件夹,里面就是vue-cli创建的一个基于webpack的vue.js项目
- 然后进入项目目录(
cd vue-project
),使用cnpm安装依赖
cnpm install
- 若想在项目中使用es6则需要安装babel-runtime和babel-polyfill
cnpm i babel-runtime --save
cnpm i babel-polyfill --save-dev
在main.js顶部引入
import 'babel-polyfill'
- 安装axios用来请求后台接口
cnpm i axios --save
- 在项目中使用sass预编译器
- 由于新版本将sass配置在了util.js中,我们不需要在build文件夹下的webpack.base.conf.js的rules里面添加配置了,只需在当前目录下直接安装就行
cnpm i --save-dev node-sass
cnpm i --save-dev sass-loader//sass-loader依赖于node-sass
- 在.vue文件中修改style标签
<style lang="scss">
然后启动项目
npm run dev
如果浏览器打开之后,没有加载出页面,有可能是本地的8080端口被占用,需要改一下配置文件config->index.js
因为打包之后,外部引入js和css文件时,如果路径以’/’开头,本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得将build的路径前缀改为’./’;
四、打包上线
项目开发完后,可以输入
npm run build
来进行打包工作。
打包后,会生成dist文件。
项目上线时,只需要将dist文件放到服务器就行了。