Vue-cli +webpack 手把手教你安装

Vue-cli +webpack :

$ npm install -g vue-cli

$ vue init webpack vuedemo

$ cd vuedemo

$ npm install

$ npm run dev

步骤：

1、安装node ，去官网下载安装

2、使用npm安装vue-cli :

npm install -g vue-cli

在安装vue-cli时，已经自带安装webpack。

可以使用淘宝的镜像文件: npm install -g cnpm --registry=https://registry.npm.taobao.org

再使用cnpm安装vue-cli : cnpm install -g vue-cli

3、生成项目模板

vue init webpack vuedemo

出现以下提问：

Target directory exists. Continue? 目标目录不存在，是否继续？ y

Project name (vuedemo ) 直接回车

Project description : 项目描述

Author: 作者

Vue build：打包方式 （直接回车就可以或者选第二个，我选第二个）

Install vue-router? 是否安装vue-router 是

Install ESL TO lint your code? 是否使用ESL代码检测

Pick an ESLint preset?  standard (设置编码风格采用stardard 参加 (https://github.com/feross/standard)   

Setup unit tets with Kara + mocha? 是否安装单元测试，我选择安装

Setup e2e tests with Nightwatc?  是否安装e2e测试 ，我选择安装

进入创建的工程下面：

cd vuedemo （这里的vuedemo是之前输入的项目名）

4、安装依赖的库：

cnpm install

另：安装vue-router :cnpm install vue-router --save-dev

安装vuex ：cnpm install vuex --save-dev

安装 vue-resource：cnpm install vue-resource--save （ajax请求要用到）

配置sass:

npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }

vue中的style加上<stylelang="scss">

（--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。）

5、编译程序

npm run dev ( 此时不能用cnpm来运行，必须是npm )

如果没有出现的话，可能8080端口被占用，在config/index.js中将dev中的port改为其他值试试

6.webpack打包：

npm run build

dist中相对路径修改：

css/js： 在webpack.prod.conf.js文件中的webpackConfig找到output，添加一项publicPath: './'

背景图片：更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

if (options.extract) { return ExtractTextPlugin.extract({ use: loaders,publicPath: '../../',// 注意配置这一部分，根据目录结构自由调整 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) }

js引用图片 ：

1、先在data里面导入这张图片，例如：

    bg:require('../assets/bg.jpg')

2、然后在template里面对这个div做个绑定，例如：

    <div :style="{backgroundImage:'url('+ bg + ')'}" >

在node-module文件夹右键去阻止检索该文件:右键-mark Directory as -Excluded