栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

vue项目初始配置

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue项目初始配置

先在git上创建仓库
    A、使用git clone + SSH链接 指令将网络上的项目获取到本地
在VS CODE中配置项目
    A、输入vue create . 指令创建项目
    B、输入npm install axios安装axios请求
    C、输入npm install vue-router --save安装路由请求
    D、输入npm install vuex --save安装vuex方法
    E、输入npm install reset-css重置默认样式
    F、输入npm i vant -S安装vant UI 2.0框架 试用移动端开发 3.0版本安装方法看文档
配置vue.config.js文件
module.exports = {
  lintOnSave: false, // 关闭eslint 代码规范
  publicPath:process.env.NODE_ENV === 'production'? './':'' // 设置开发环境下的路径
};
配置jsconfig.json文件
    在当前文件根目录下新建jsconfig.json文件
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultimports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}
// 只要是使用'@/'方式去查找路径文件
配置main.js文件 vue2.0
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 引入vantUI的css样式
import "vant/lib/index.css";
import "@/vantui/index";

// 引入reset-css 自动化清除标签内的 padding和margin边距
import "reset-css";

Vue.config.productionTip = false;

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

配置路由router文件
    A、在当前文件目录下新建index.js文件
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;
配置store的vuex文件
   A、在当前文件目录下新建index.js文件
import Vue from "vue";
import Vuex from "vuex"; // 引入vuex

Vue.use(Vuex);

// 使用方法
export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

配置vantui文件
    A、在当前文件目录下新建index.js文件
// 专门放引入VantUi的组件
import Vue from "vue";
import {Search} from "vant";

// 引入搜索框
Vue.use(Search);
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/309058.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号