vue安装脚手架

vue安装脚手架

1、检测node
	node -v
2、检测npm
	npm -v
3、安装淘宝镜像（有就可以不用执行）
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	检查是否安装  cnpm -v
	
4、全局安装vuecli
	cnpm install vue-cli -g
5、初始化项目

    vue init webpack 脚手架文件名(例如：vuetest)
	//在vue-router？一项选择“y”其他的都是选择“n”
	
6、进入项目
	cd vuetest
7、安装模板（可省略）
	cnpm install
8、运行项目
	cnpm run dev 或 npm run dev

安装sass

处理css和html之间的兼容用hack来处理

npm install node-sass@^4.9.0 -D  //安装node-sass

cnpm install sass-loader@^7.0.3 -D  //安装saaa-loader

cnpm install style-loader  --save-dev  //安装style-loader

在build文件夹下面额webpack.base.config.js

安装axios和vue-axios

cnpm install --save axios vue-axios
安装之后再main.js引入
import Axios from "axios"
import VueAxios from "vue-axios"

vue.prototype.$http = Axios
Vue.use(VueAxios,Axios)

接下来是 /api 是通过config文件的index配置反向代理
'/api':{
	target:"http://localhost:8080",		//第三方接口
	changeOrigin: true,		//跨域
	pathRewrite: {
				'^/api': '/static/mock'			
	//这里根据需要可以修改地址，我这里配置的是本地存放json的文件夹
			}
		}

使用方法

config/index.js设置反向代理

示例代码

<template>
    <div>
        这是视图
        <ul v-for="(item,index) in xiaohua" :key="index">
            <li>{{item}}</li>
        </ul>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                xiaohua: ""
            }
        },
        methods: {
            getdata() {
                this.$http.get("/api//1196-2", {
                    params: {
                        // "showapi_timestamp": formatterDateTime(),
                        "showapi_appid": '245347', //这里需要改成自己的appid
                        "showapi_sign": 'a30fe1d8f4c84a63a71ad76d473abcab',  //这里需要改成自己的应用的密钥secret
                        "keyword": "掩耳盗铃"
                    }
                }).then(res => {
                    console.log(res.data.showapi_res_body)
                    this.xiaohua = res.data.showapi_res_body.data
                })
            }
        },
        mounted() {
            this.getdata()
        }

    }
</script>

安装vuex

https://vuex.vuejs.org/zh/installation.html

npm install vuex --save
也可以通过官网查询其他安装方法
在src文件夹新建一个store文件，再新建一个文件index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{}
})
export default store  //导出

通过main.js将vuex引入
import store from './store'
new Vue({
  store
})

安装vant

# 通过 npm 安装
npm i vant -S
# 安装插件
npm i babel-plugin-import -D

插件为全局引入
方式三. 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
配置按需引入后，将不允许直接导入所有组件

webpack打包项目到服务器

https://www.jianshu.com/p/b59204651846

1**.使用npm run build进行打包**

​ 打包完成后git页面最后显示file://won.t work

注意，出现缺少模块的时候输入 npm i 模块名 安装之后重新打包

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

2：打开dist/下的index.html

修改config/index.js里的assetsPublicPath的字段，初始项目是/，现在改为./

dev和build里面的assetsPublicPath都要改

3.需要修改dist下的index.html资源路径为./
打开dist底下的index.html文件，修改文件路径

href和src后面的都要改

h的字段，初始项目是/，现在改为./

dev和build里面的assetsPublicPath都要改

3.需要修改dist下的index.html资源路径为./
打开dist底下的index.html文件，修改文件路径

href和src后面的都要改

安装完vscode后，在它的插件管理器中，查找Vetur并安装，然后重启一下vscode后，插件即生效：Vetur是一款可以提供Vue语法高亮、语法检查和代码快捷输入等功能的插件，可以为我们的开发过程提供很多便利。