创建vue2项目

第一步 下载脚手架

先到node官网下载node，配置node环境变量，在命令行窗口查看node -v，确定node下载好之后，全局下载vue脚手架

为了更快速下好，可以先配置一下淘宝镜像

npm config set registry=http://registry.npm.taobao.org

 然后下载脚手架

npm install -g @vue/cli

下载完成之后可以在命令行窗口输入vue查看是否下载成功

 第二步 创建项目

在想要创建项目的目录下打开命令行窗口

vue create programeName

然后选择vue2或vue3版本，选择完成之后就不用在操作，创建成功之后，根据提示

cd programeName
npm run serve

进入项目，运行项目即可

第三步 下载插件

开发避免不了需要下载一些插件，下面列举一些常用的

• vue-router

vue-router用于跳转页面切换路由，可以有一级路由、二级路由等

在src下新建router文件夹，文件夹下新建index.js文件

vue是已经具备的，我们需要下载一个vue-router插件，需要注意的是vue-router的版本，vue2的npm install vue-router@3.5.2，vue3就需要4版本了，下载好之后，就是在router/index.js文件中配置了。需要的页面引入，配置一下路径。

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: '/modelTree',
    }, {
        path: '/modelTree',
        component: () => import('@/views/modelList')
    }
]
const router =  new VueRouter({
    routes
})
export default router;

 配置好index.js之后，在main.js中注册一下router

这样就算简单配好路由啦 

• elementui

1.在终端输入 npm i element-ui@2.15.0 （版本可以自行选择）

2.下载完成后，需要在main.js文件中引入，然后就可以使用element-ui进行开发了
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

• sass

npm install sass@1.26.5 --save-dev  

npm install sass-loader@7.3.1 --save-dev

第四步 一些配置 

• 配置@ 引用路径

在开发中，如果一直../../去找文件很麻烦，所以配置引用路径是很有必要的，首先在node modules里面找一下path，如果有可以直接使用， 没有的话需要下载一下

npm install path --save

下载完成之后在vue.config.js文件中配置一下路径，如果没有这个文件就自己创建一个

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = defineConfig({
  // 配置@ 引用路径
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("base", resolve("baseConfig"))
      .set("public", resolve("public"));
  },
})

 配置完之后@就可以使用了，但是现在没有提示，还需要vscode里面配置一下

ctrl+shift+p打开搜索栏，找到首选项设置中的setting.json文件，将下面代码添加进去即可

{

    "path-intellisense.mappings": {

        "@": "${workspaceRoot}/src"

     }

}

其实还有很多东西需要搞，像是 vuex， axios这样，之后有时间补上