1.vue-cli脚手架构建vue项目
前提安装node、npm,nodejs中文网 ,安装了node之后npm也就以前安装了,分别可以使用
node -v
和
npm -v
来查看安装的版本。
然后全局安装 vue-cli,安装一次就可以了。
npm install -g vue-cli
可以使用
vue -V
来查看是否安装成功,及版本信息。
接下来使用vue-cli 构建一个vue项目,进入项目所要构建的文件目录
vue init webpack vuex-demo
其中vuex-demo是项目名称,之后会有一些相应的提示信息,根据自己的需求来选择。提示信息大概如下图所示,
当看到如下图界面时,表示构建成功
此时根据提示输入命令即可,若npm run dev 时报错,运行 npm install 安装依赖之后再次运行 npm run dev即可。
然后打开 http://localhost:8080/#/ 就可以看到如下图所示界面,构建完成。若是8080端口占用则依次取8081端口或8082端口等。
2.sass配置
npm install node-sass --save-dev
npm install sass-loader --save-dev
注:vue最新版本2.9已不需要添加loader的配置,否则会产生loader重复添加导致的报错 Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
如果是版本比较老的,则需要添加loader配置,具体配置如下:
build/webpack.base.config.js种配置loader
{
test: /\.(scss|sass)$/,
loader:'style-loader!css-loader!sass-loader'
}
在html种直接添加样式时
<style lang="scss">
是 lang="scss" 而不是 lang="sass"
此外,vue对象中的注释要使用/* */ 不能使用// 使用//编译报错啊
补充:node-sass 和sass-loader 的安装不要用yarn安装,如果npm安装有问题的话 , 用cnpm安装,如果用cnpm安装了,编译运行还报错的话,请统一使用cnpm安装,重新cnpm install 一下就好。
3.mock数据配置
在build/webpack.dev.conf.js中进行配置
//首先
const express=require('express')
const app=express()
var appData=require('../data.json')
var seller=appData.seller
var goods=appData.goods
var ratings=appData.ratings
var apiRoutes=express.Router()
//找到devServer,在里面添加
before(app){
app.get('/api/seller',(req,res) => {
res.json({
erron:0,
data:seller
})
}),
app.get('/api/goods',(req,res) => {
res.json({
erron:0,
data:seller
})
}),
app.get('/api/ratings',(req,res) => {
res.json({
erron:0,
data:ratings
})
})
}
4.eslint的配置
使用vscode,并安装eslint插件和vetur插件即可实现Ctrl+S保存的时候自动按照项目配置的eslint格式格式化代码,这样用起来简直不要太爽,分分钟钟扔掉了webstorm。嗯,我扔掉ws大概是因为一个月找一次注册码,实在闹心,转用vscode之后真的是越用越爽。废话不多说。
配置一条验证规则,这么写
规则名: 值
值可以是以下几种
off
或 0:表示不验证规则。warn
或 1:表示验证规则,当不满足时,给警告。error
或 2 :表示验证规则,不满足时报错。
下面是我比较习惯用的一些规则,前两条是vue-cli自动生成的
rules: {
// allow async-await 2:error 1: warn 0:off
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'semi': 0, // 使用分号
'indent': [2, 2], //缩进2个空格
'space-before-function-paren': [2, {
"anonymous": "always",
"named": "never",
"asyncArrow": "always"
}], // 强制在 function的左括号之前使用一致的空格
'no-undef': 2, //禁止使用没有定义的变量,除非在/*global*/已经申明
}
eslint的规则有那么多,而我只喜欢简单配置一下分号和空格,js语句结尾是一定要分号的(个人习惯,不喜勿喷哈),以及一些空格的配置,大概就是
5.路径配置
在build/webpack.base.conf.js中做出如下配置,即可在代码中直接引用component,common等路径。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': resolve('src/components'),
'common': resolve('src/common')
}
},
如
配之前
import HelloWorld from '@/components/HelloWorld'
配置后
import HelloWorld from 'components/HelloWorld'
6.反向代理的设置
config/index.js文件中
proxyTable: {
'token': {
target: "http://139.199.0.217" //要代理的地址
},
'api': {
target: "http://139.199.0.217"
}
},
好了就写这么多了,有问题欢迎留言,我们一起讨论。
希望我的入坑经验对你有所帮助,愿圣光与你同在!