vue学习笔记（一）_invalid css after "<": expected 1 selector or at-r-CSDN博客

本文链接：https://blog.csdn.net/daiqisi/article/details/79751324

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"
      }
    },

好了就写这么多了，有问题欢迎留言，我们一起讨论。

希望我的入坑经验对你有所帮助，愿圣光与你同在！