创建vue项目并安装依赖
1.由于vue项目依赖 node.js npm 需要先安装
在cmd命令中输入 node -v 回车 会出现node,js的版本
输入npm -v 回车 会出现npm的版本
输入vue -V 回车 会出现vue的版本
2.安装vue
npm install -g vue-cli
//-g表示全局安装,vue-cli是模块,全局安装的模块可以在命令行直接使用
由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像
即:npm install -g vue-cli --registry=https://registry.npm.taobao.org
之后,可以vue --V查看vue是否安装好,出现版本号即安装成功。
3.接下来是创建项目框架
如果想放到指定的目录下,先进入这个目录再执行创建项目的命令
E:\test\vue init webpack myProjectName //创建一个基于"webpack"的项目,后面是项目名
依次按照提示输入,项目名、项目描述、项目作者等等,
然后一路回车 看到最后这个项目就创建好了。
4.运行测试
npm run dev
一般流览器会自动跳转出界面http://localhost:8080/,也可以手动打开流览器器输 入地址。
npm run build 打包
注意:
设置config文件下的index.js中build对象assetsPublicPath属性值为空,防止打包后识别文件路径错误。端口号dev的port属性可设置端口号
按需安装其他依赖
1、fastclick
先执行安装fastclick的命令。
npm install fastclick -S (npm install --save fastclick)
之后,在main.js中引入,并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body)
2、axios
npm install axios
//使用淘宝源
cnpm install axios
在main.js中引入
import axios from 'axios'
Vue.prototype.$http = axios (根据个人习惯,可加可不加)
3、vux
<1>.npm install vux --save
<2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误)
npm install vux-loader --save -dev (npm install vux-loader --save)
<3>. 在build/webpack.base.conf.js 文件进行配置
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
4、less
<1>.npm install less less-loader --save -dev (npm install less less-loader --save)
<2>.修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
<3>.App.vue中 style标签里加上lang=”less”
style内引入less文件路径,例如:@import './assets/less/common.less';
也可以直接引入less文件,在index.html引入后,需要引入less.js
5、安装sass
<1>npm install --save-dev sass-loader //sass-loader依赖于node-sass
<2>npm install --save-dev node-sass
<3>在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
5、引入font-awesome图标
先cnpm install font-awesome --save引入依赖
然后在main.js引入 font-awesome/css/font-awesome.min.css 即可。
例如:import './assets/font-awesome/css/font-awesome.min.css' //字体图标
参考: https://blog.csdn.net/Dj_Fairy/article/details/79315740