vue项目创建&&简单配置

脚手架版本：vue-cli3

1 创建项目

    1.1 命令创建项目

        terminal输入：vue create project-name   

        接下来会进行一个preset选择

           default（快速搭建项目原型）

           manually（手动进行项目配置）

  1.2 使用图形化界面创建管理项目

        terminal输入：vue ui

2 安装项目依赖以及配置

npm install axios //请求
npm install vconsole //log
nom install vue-router //路由

PxToRem依赖：

npm install postcss-pxtorem  
npm install lib-flexible  

项目中vue.config.js是可选项，在package.json同目录下创建该文件vue.config.js

  在vue.config.js做css配置

module.exports = {
  css:{
    loaderOptions:{
      postcss:{
        plugins: [
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
                rootValue: 37.5,
                selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
                propList: ["*"], //可以从px更改为rem的属性。
                minPixelValue: 2 // 设置要替换的最小像素值。
            })
        ] 
      }
    }
  }
}

     在main.js 引入  import "lib-flexible/flexible.js 

3 路由配置

    src下创建router/index.js

import Vue from 'vue'
import Router from 'vue-router'

//引入组件模块
import Hello from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes:[
    {path:'/hello',name:'',component: Hello}
  ]
})

    在main.js引入 import router from './router'

4 项目webpack配置在vue.config.js中  参考链接：https://cli.vuejs.org/zh/guide/webpack.html

5 项目启动打包参见package.json的scripts  参考链接：https://cli.vuejs.org/zh/guide/cli-service.html