Vue2.x+ElementUI搭建项目

第一步：创建Vue项目并启动

1 通过脚手架命令，创建项目：

vue create 项目名 ；

2 使用npm安装Vue脚手架：

npm install -g @vue/cli ；

*默认生成的项目目录：

*启动项目：npm run serve ( http://localhost:8080/ )

3 创建新页面，并配置路由，浏览器访问新页面

• 1 安装路由

执行npm命令： npm install vue-router --save ；

• 2 创建自定义页面（index.comonent.vue）、路由文件（router.js），并将自定义页面~配置到路由文件中

• 3 将路由router.js文件，配置到项目入口文件（main.js）中，

• 4 最后在App.vue中修改页面的显示方式：路由显示页面形式（路由占位符），完成以上步骤，浏览器可以通过配置访问页面…

注意：
*这里路由配置文件router.js是建在src目录下，取名router.js 与main.js同级（网上看到部分作者是在src目录下创建一个router文件夹新建一个index.js）。
*main.js中默认new Vue实例中的写法，会有一定的问题，需要按照上面做修改！）

第二步：安装Axios用于请求API

• 使用npm包管理器进行安装axios：npm install axios ;
• 安装vue-axios：npm install --save axios vue-axios ;

在全局入口文件main.js中配置

第三步：项目引入ElementUI（桌面端）组件

• 通过npm安装，执行命令：npm install elemnt-ui --save-dev

在全局入口文件main.js中引入组件及样式

第四步：总结

1.package.json中查看项目已安装的插件的版本；

2. package.json中加入rules（规则）

规则代码：
“rules”: {
“generator-star-spacing”: “off”,
“no-tabs”: “off”,
“no-unused-vars”: “off”,
“no-console”: “off”,
“no-irregular-whitespace”: “off”,
“no-debugger”: “off”
}

• A问题：在执行完axios安装命令后，终端和package.json文件同时可见axios的版本号，但是项目重新加载时报axios模块未找到，怎么解决？
• A答案：网上有人推荐，将 node_modules文件夹删除（npm安装后生成的依赖文件），重新执行安装插件命令！
• B答案：自己多次实践所得，重启项目！重启编译器！为什么？因为有时候执行npm安装插件后，编译器并不能完全很有效的检测到本地已安装的依赖文件，就很傻的告诉我们，你这个文件未找到！（在angular中创建一个新的页面组件，若不重启项目，死活检测不到那个页面组件，其他框架未知。）此时你就需要通过项目重启或编译器重启，来迫使编译器去重新检测本地项目内的依赖文件！不到最后，坚决不使用A答案的做法！当然如果你的依赖文件小，可能感觉不到啥，若是你恰好使用Angular为基础的项目框架，你不管删依赖文件夹或重新使用npm安装插件，特别，特别费时间！亲身体会！