如何去从头搭建一个项目？

一、在文件夹的地址栏中输入cmd.打开命令行程序。创建一个项目

选择项目是vue2还是vue3，在此我选择的是vue2，且选择了默认选项。

然后创建好程序后，npm run serve,运行程序，一个初始的项目就搞定了。

二、配置

2.1、安装路由

npm install vue-router

在src目录下新建文件router.js，配置路由文件，这时会出现一个问题，就是路由版本过高，导致路由不生效。重新下载低版本匹配的路由即可。

然后，就可以创建路由页面了。在src目录下创建router.js，

在main.js中引入

2.2、自动生成vue代码模板

为了提高代码效率，可以试用vscode的代码模板，这里可以在网上搜索的相对好用的模板。

如下连接：www.cnblogs.com/binky/p/126…

2.3、安装less

cnpm install less@3.10.3 --save-dev

cnpm install less-loader@5.0.0 --save-dev

cnpm install node-sass@5.0.0 --save-dev

这里node-sass可能会由于版本问题出错，安装相应的版本即可。这里版本报错，安装4.0.0。版本报错时，比较方便的方法是将node_modules删掉，然后重新npm i，如果最开始用的cnpm 则使用cnpm ,不然两个npm 会有报错信息，安装了库却找不到。

2.4、安装element-ui

npm i element-ui -s，在main.js中引入

import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUi)

小用法：代码折叠快捷键

链接取自：blog.csdn.net/wuyujin1997…

2.5、安装vuex和axios

npm install vuex@3.0.1 --save-dev
npm install axios@0.19.0 --save-dev

在src下新建store.js，引入vue、vuex、axios

import Vue from "vue";
import Vuex from 'vuex';
import axios from 'axios'
Vue.use(Vuex);

export default new Vuex.Store({
    state: {

    },
    // 更改状态，必须同步执行
    mutations: {

    },
    // 类似于mutations，不同在于：action提交的是mutation，而不是直接更改状态，
    // action可以包含任意异步操作。分发：action通过store.dispatch方法触发
    actions: {

    },
    // store的计算属性
    getters: {

    },
})

在main.js中引入

这时出现报错信息，error 'axios' is defined but never used no-unused-vars

解决办法：新建文件vue.config.js，然后添加

module.exports = {
    lintOnSave: false
}

再重新启动项目即可。

如何去从头搭建一个vue项目（一）