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-sass
npm install --save-dev node-sass
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }
vue中的style加上<style
lang="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