官网地址

命令行 创建项目

  1. # 全局安装 vue-cli
  2. $ npm install --global vue-cli
  3. # 创建一个基于 webpack 模板的新项目
  4. $ vue init webpack your-project-name
  5. # 安装依赖，走你
  6. $ npm install
  7. # 进入项目
  8. $ cd your-project-name
  9. # 开发版本打包并运行
  10. $ npm run dev
  11. # 线上环境整个项目打包  生成 dist 可以直接部署到服务器上的文件夹
  12. npm run build

项目的使用技巧

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

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

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

    npm安装

    $ npm install less less-loader —save-dev

    或者使用 yarn

    $ yarn add less less-loader —dev
  2. - 安装成功后，打开 `build/webpack.base.conf.js` ，在 module.exports = 的对象的 module.rules 后面添加一段：

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

  2. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-95d3d7b8e6322323.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. - 最后在代码中的 style 标签中 加上 lang="less" 属性即可
  2. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-e3209b87b6bb3246.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. - 之后在项目中测试是否成功

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

  2. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-dcf44d997dfc0d6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. - 在浏览其中打开相应页面，这个页面是 `/` 根页面点击跳转过来的子路由
  7. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-474597ff79c71913.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  8. ![image.png](https://upload-images.jianshu.io/upload_images/9064013-3a535950b2f0d7c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  9. 可以看到样式编译成功了 哦耶~
  12. 2. 在 router 下的路由文件里设置格式，将页面上路由中默认显示的 `#/` 给去掉

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

```

image.png