百无禁忌诸事皆宜
百无禁忌诸事皆宜

[Vue] 项目初始化

大纲

  • 1.脚手架的安装（指令）
  • 2.项目的创建
  • 3.项目结构梳理
  • 4.安装 axios
  • 5.安装 Element UI
  • 6.GitHub
  • 7.Css less 插件（如果初始化时没装）
  • 8.模板


1.脚手架的安装（指令）

脚手架用于快速搭建 vue 框架，下载指令为:

npm install -g @vue/cli

如果下载过慢，可以使用国内淘宝源的 cnpm

npm install -g @vue/cli // 全局安装脚手架
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org // 如果太慢下载 cnpm
npm config set registry https://registry.npm.taobao.org // 将 cnpm 启动设置为 npm
npm config get registry // 验证是否成功将 npm 源地址修改为淘宝
npm install -g @vue/cli // 再用国内源下载脚手架即可！

2.项目的创建

  1. 创建 vue 项目 vue create 项目名，项目名最好用中划线，这是 3.0 版本项目创建方式
  2. 首先先建立项目文件夹，然后 cd 进去 npm init -y 创建包管理文件 package.json
  3. 下载 vue，npm i vue

（1）手动选择功能
[Vue] 项目初始化_第1张图片

（2）选择功能，点击空格可以选择
① Babel 是 ES6 -> ES5
② Router 是 路由的意思
③ Css Pre-processors 是 Css 预处理器，选择
④ Vuex 是状态管理
⑤ Linter / Formatter 是 语法检查
⑥ Choose Vue version 是
[Vue] 项目初始化_第2张图片

（3）选择你想要启动项目的Vue.js版本，我选 2.0 （看你们公司）
[Vue] 项目初始化_第3张图片

（4）是否安装历史模式的路由，兼容不太好，我们使用 hash 模式的，选 n
在这里插入图片描述
（5）选择预处理器，我用 less
[Vue] 项目初始化_第4张图片

（5）选择代码格式校验规范，使用第一项；
[Vue] 项目初始化_第5张图片

（6）什么时候进行代码校验，选第一个保存文件时校验; 它会自动给你纠正为规范代码格式，纠正不了就报错；
[Vue] 项目初始化_第6张图片

（7）这些工具的配置文件怎么创建？单独创建还是放 package.json 中，选择第一项，好维护
[Vue] 项目初始化_第7张图片

（8）是否将这些配置保存为模板？ 随意，我选 n
在这里插入图片描述
（9）开始创建
[Vue] 项目初始化_第8张图片

（10）cd 到我们项目的根目录，然后按照代码执行 npm run serve 运行
在这里插入图片描述
（11）运行后根据给的 url 到浏览器打开即可
[Vue] 项目初始化_第9张图片
2. 创建项目（图形化创建）vue ui

3.项目结构梳理

注意！ import 导入必须放到所有文件之上，注释除外！
（1）src: 存放源码，我们开发的所有代码都放在 src 目录下
（2）main.js: 这个文件是我们项目的启动入口
（3）App.vue: 是根组件，可以当做是网站首页
（4）router: 路由模块（里面有个 index.js）
（5）views: 放网页的，看个人习惯，我喜欢把显示页的组件放里面，都是单独建立的文件夹 比如 login
（6）components: 放公共的组件
（7）node_modules: 放第三方包的
（8）public: 放静态资源的，图标啊 index 文件啊…
（9）assets: 存放组件中的静态资源
（10）src 目录中创建一个文件夹 api，存放共用或常用的 api
（11）src 目录中创建一个文件夹 utils，放一些工具模块，里面创建个 request.js 基于 axios 的请求模块
（12）src 目录中创建一个文件夹 styles，放全局样式相关资源； 再在其中创建一个 index.less 全局样式，到入口文件中通过 import 路径引入；

App.vue: 可以当做网站首页，有三个部分，