vue框架(1)---使用vue-cli快速构建项目

转自本人掘金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来更新版本。

三、新建项目

1. 在命令行中进入到项目目录，输入：

vue init webpack vue-project  //vue-project项目名

配置完成后，可以看到目录下多了一个项目文件夹，里面就是vue-cli创建的一个基于webpack的vue.js项目

1. 然后进入项目目录(cd vue-project),使用cnpm安装依赖

cnpm install

1. 若想在项目中使用es6则需要安装babel-runtime和babel-polyfill

cnpm i babel-runtime --save
cnpm i babel-polyfill --save-dev

在main.js顶部引入

import 'babel-polyfill'

1. 安装axios用来请求后台接口

cnpm i axios --save 

1. 在项目中使用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文件放到服务器就行了。