Vue初始

标签： #Share

本地构建Vue环境

• 安装Node.js 并配置完成

配置方式：https://blog.csdn.net/tjj3027/article/details/84751321

​ https://www.cnblogs.com/fighxp/p/7411608.html

卸载，安装，设置数据源，配置环境变量，配置全局存储目录（node.js，F:\Node.js\node_global）

• 修改Node.js 文件源（npm config set registry https://registry.npm.taobao.org）
• Vue 相关配置

Vue 3.0： https://segmentfault.com/a/1190000017020755

Vue项目构建

Vue 3.0： https://segmentfault.com/a/1190000017020755

Vue 3.0 项目结构

Vue 集成ElementUI

npm i element-ui -S

/* main.js */
/* import  */
import Vue from 'vue'
import App from './App.vue'

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue 集成axios

npm install axios

在项目根目录创建文件 vue.config.js —> 此举一来可以解决跨域问题，二来可以统一请求的域名统一性

// vue.config.js 基于服务端代理解决跨域问题
module.exports = {
 devServer: {
     proxy: {
         // /api前缀
         "/api": {
             // 目标地址
             target: "https://news-at.zhihu.com/api",
             changeOrigin: true,
             ws: true,
             pathRewrite: {
                 "^/api": ""
             }
         }
     }
 }
}

main.js 同步修改

/* import */
import Vue from 'vue'
import App from './App.vue'

// 引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue 集成Router

npm i vue-router -S

建一个与main.js同级的 router.js文件，引入Router，配置各界面的路由

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

// 组件模块
import News          from './components/News.vue'
import NewsContent   from './components/NewsContent.vue'
import Movies        from './components/Movies.vue'

Vue.use(Router)

export default new Router({
 routes: [
     { path: '/'             , name: 'news'           , component: News },
     { path: '/newsContent'  , name: 'newsContent'    , component: NewsContent},
     { path: '/movies'       , name: 'movies'         , component: Movies},
 ]
})

main.js 同步修改

/* import */
import Vue from 'vue'
import App from './App.vue'

// 引入router
import router from "./router.js";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  // 注册路由
  router,
}).$mount('#app');

界面中使用方式

<router-link to='/home'>首页</router-link>
<router-link to='/foods'>美食</router-link>    
<router-view> </router-view>

// JS 主动跳转
// GET方式
this.$router.push({path:'/newsContent', query:{id: id}});

// POST方式
this.$router.push({name:'/newsContent', params:{id: id}});

简单项目DEMO：

GitHub：https://github.com/kkzhilu/Kerwin-Vue

分支 ： master

界面效果：