VUE—项目从搭建环境到打包上线

1：安装node

2：安装淘宝npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3：安装全局vue-cli脚手架

cnpm install --global vue-cli

4：建一个新项目

vue init webpack my-project-first

5640239-83f177a1a3060e48.png

• Project name：项目名称
• Project description：项目描述
• Author：作者
• Vue build：打包方式（standalone和runtime）,按回车选择默认的就好
• Install vue-router?：是否安装路由？肯定是需要用到的，按 y 回车
• Use ESLint to lint your code?：是否启用eslint代码检测规则？不需要，按n回车
• Setup unit tests with Karma + Mocha?：是否进行单元测试？不需要，按n回车
• Setup e2e tests with Nightwatch?：是否进行端对端测试？不需要，按n回车

5：进入项目文件夹

cd my-project-first

6：在项目里安装依赖

cnpm install

7：运行

cnpm run dev

8：在浏览器输入localhost:8081

9：使用npm run build进行打包

这个时候可以看到项目里面多了一个dist文件夹

10：打开dist/下的index.html

但是所有的js，css，img等路径有问题是指向根目录的，
修改config/index.js里的assetsPublicPath的字段，初始项目是/，现在改为./
再重新使用npm run build进行打包
通过浏览器直接打开html，可以访问

11：axios请求本地json

1.npm安装

npm install axios --save

2.在main.js下引用axios

 import axios from 'axios'

注：axios并不是vue插件，所以不能使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。

import axios from 'axios'
Vue.prototype.$http = axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用$http命令

methods: {
  postData () {
    this.$http({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}

3.在static文件夹底下新建data.json文件

{
    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}
    ]
}

4.写一个axios

getData1() {
    this.$http({
          method: 'get',
          url: '../../static/data.json'
    }).then(function(res){
          console.log(res.data)
    }).catch(function(err){
          console.log(err)
    })
},

12：axios访问跨域地址

http://www.intmote.com/test.json
设置代理，利用proxyTable属性实现跨域请求
1）config/index.js

 proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

2）main.vue

 getData2() {
      this.$http({
          method: 'get',
          url: '/api/test.json'
      }).then(function(res){
          console.log(res.data)
      }).catch(function(err){
          console.log(err)
      })
},

3）重新启动项目

13：sass

1.安装相关模块：
npm install node-sass --save-dev
npm install sass-loader --save-dev
2.打开webpack.base.config.js在loaders里面加上：

 {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
 }

3.在.vue文件中使用

<style lang='scss' scoped></style>

4.可能出现的问题

image.png

5.解决办法
安装的sass-loader的版本为最新8.0.0，查看网上资料说是版本过高导致编译错误。
我把项目package.json文件中sass-loader版本改为7.3.1
执行命令，重新安装项目依赖

$ npm install

然后，启动项目

$ npm run dev