今天完成的事情：今天学习了vue的小技巧
明天计划的事情：继续后续的学习
遇到的问题：实际操作不足还需更多的练习
收获：

1.  vue-cli 构建项目

官网地址

• 命令行

# 全局安装 vue-cli

$ npm install --global vue-clif 

# 创建一个基于 webpack 模板的新项目 

$ vue init webpack your-project-name 

# 安装依赖，走你 

$ npm install 

# 进入项目 

$ cd your-project-name 

# 开发版本打包并运行 

$ npm run dev 

# 线上环境整个项目打包  生成 dist 可以直接部署到服务器上的文件夹 

npm run build

2.  项目模板中使用 less 方法

原文地址
vue-cli 构建的项目默认是不支持 less 的，需要自己添加。

• 首先安装 less 和 less-loader ，在项目目录下运行如下命令

# npm安装 $ npm install less less-loader --save-dev # 或者使用 yarn $ yarn add less less-loader --dev 

• 安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：

module.exports = {     //  此处省略无数行，已有的的其他的内容     module: {         rules: [           //  此处省略无数行，已有的的其他的规则           {             test: /\.less$/,             loader: "style-loader!css-loader!less-loader",           }         ]     } } 

• 最后在代码中的 style 标签中 加上 属性即可

<style scoped lang="less"> </style> 

• 之后在项目中测试是否成功

npm install less less-loader --save-dev npm run dev 

• 在浏览其中打开相应页面，这个页面是 / 根页面点击跳转过来的子路由

    

可以看到样式编译成功了 哦耶~

3.  在 router 下的路由文件里设置格式，将页面上路由中默认显示的 #/ 给去掉

// 去掉路由中自带的 #/ 这种东西   mode: 'history', 

• 需要注意的是使用了 history 之后需要在服务器部署时增加一些配置，具体方法插件下面官方写的配置方法