vue-cli创建一个vue完整项目以及简单的菜单路由跳转

一、两个css技巧以及eslint配置

1、给段落的首字母加样式

.contain p:first-child:first-letter {
color: red;
}
.contain p:first-child:first-line {
color: inherit;
}

2、实现一个不停旋转的地球

.rotate{
    animation-name: rotateme;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotateme{
    from {transform:rotate(0deg)} to {transform:rotate(360deg)}
 }

3、安装和使用eslint插件

安装 ESLint 插件

在 VS CODE 里按 F1 输入 ext install vscode-eslint 即可安装 ESLint;

使用 ESLint 插件

在项目根目录下 新建一个名为 .eslintrc 的文件.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "standard",
    "rules": {
    "semi": [2, "always"],
    "indent": "off"
    }
}

二、完整的搭建一个vue项目

1、先搭建了一个2.0版本的，vue init webpack myProject 报错：vue-cli Failed to download repo vuejs-templates/webpack-simple:self signed certificate in certificate chain；

原因：无法连接外网或者网络请求超时

解决：需要手动下载 webpack-simple 模板 ，进入到 https://github.com/vuejs-templates/ ，选择 webpack-simple 下载到本地。

下载以后重新执行命令（命令后面加--offline） ,具体操作看这位老哥写的博客：https://www.cnblogs.com/gaozhiqiang/p/11528554.html

最后磕磕绊绊项目启动起来了。先去下载插件less,然后在webpack.config.js里面配置

{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
}

接下来安装vue-router,写路由，分为侧边菜单栏以及右边主要内容：router文件夹下面的index.js配置

import里面的注释，是表示这个文件打包后的名字，后面用的路径，可以用@views/home.vue

@在哪里定义呢？

webpack.config.js里面module.exports的resolve块中，给alias对象定义属性

'@': path.resolve(__dirname,'./src')

定义文件路径的别名，path.resolve()用来解析路径

结果就是跳转不了，问了前端大神，说webpack-simple是webpack1.3.2的配置，没有vue-router的中间件，不能配置vue-router

2、搭建3.0以上版本的，需要安装vue-cli

npm install -g @vue/cli

vue create myProject

就可以启动一个项目

三、工作中积累的一些知识

1、forEach（）的缺点是，一旦循环开始，不能通过return ,或者break中断

2、es的箭头函数写法

const fun = ()=>1+2  //3
const fun1 = ()=>{1+2}  //undefined
const fun2 = ()=>{return 1+2}  //3

上述第一种简写方式默认有return，加了{}的必须指明显示return

3、watch监听路由变化不起作用

一般用法：缺点=》当值第一次绑定的时候，不会执行监听函数，只有值发生改变时才会执行

watch:{
   name(newVal,oldVal){
      //....
   }
}

handler用法

watch:{
   name(){
      handler(newVal,oldVal){
          //...
       },
      immediate:true
   }
}

immediate：true，表示在watch首次执行的时候，就立即执行handler方法