🍑一、安装组件

---

🍊1.1、node.js

---

🍓1.1.1、下载

---

下载地址

🍓1.1.2、安装配置

---

解压后，配置环境变量

🍓1.1.3、验证

---

npm -v
1

验证报错：

提示npm WARN config global –global, –localare deprecated. Use–location=global instead.8.11.0

🍓1.1.4、修改配置,再次验证

---

修改npm、npm.cmd文件，将prefix -g替换为prefix --location=global

验证通过

🍊1.2、vue-cli

---

Vue CLI 的包名称由vue-cli改成了@vue/cli
vue-cli 用于创建vue2的项目；
@vue/cli 用于创建vue3的项目，当然也支持vue2
vue-cli 是Vue早期推出的一款脚手架，使用webpack创建Vue项目，可以选择安装需要的各种插件，比如Vuex、VueRouter等

🍓1.2.1、安装webpack

---

npm install webpack --location=global
1

一直报超时:

🍒1.2.1.1、更改镜像，再次安装

---

npm config set registry https://registry.npm.taobao.org
1

🍒1.2.1.2、安装webpack-cli

---

安装webpack-cli:

npm install webpack-cli --location=global
1

🍒1.2.1.3、验证

---

webpack -v:

🍓1.2.2、安装@vue/cli

---

npm install @vue/cli --location=global
1

验证：vue -V

🍑二、创建vue项目（请略过该步骤，弯路心得：千万不要自动创建，直接参照4.1、手动创建）

---

作为前端小白，2和3没区别，网上是说3响应更快速，更轻便，但是兼容性不太好。

🍊2.1、创建vue3项目

---

创建的时候选择3.0版本：

D:\demo>vue create sport-ui
 ERROR  Failed to get response from https://registry.npm.taobao.org/vue-cli-version-marker


Vue CLI v5.0.8
Failed to check for updates
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
Failed to check for updates
✨  Creating project in D:\demo\sport-ui.
⚙️  Installing CLI plugins. This might take a while...


added 848 packages in 1m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages in 10m
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sport-ui.
👉  Get started with the following commands:

 $ cd sport-ui
 $ npm run serve


D:\demo>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

启动项目：

D:\demo>
D:\demo>cd sport-ui

D:\demo\sport-ui> npm run serve

1
2
3
4
5

登录：http://192.168.168.103:8080/

🍊2.2、创建vue2项目

---

选择版本2：

2没报错，后面就选择vue2作为项目架构了😂：

🍑三、编辑项目（都是自动创建惹的祸）

---

按照上面方法创建需要的项目，开始进行开发

🍊3.1、创建vue2项目sports-ui

---

导入vue2项目sports-ui，查看目录结构，干嘛目录有点少呀：

🍊3.2、创建router

---

由于vue-cli版本比较高，不会自动创建router,需要手动创建

🍓3.2.1、安装router

---

npm config set registry https://registry.npm.taobao.org
npm install vue-router  --legacy-peer-deps
1
2

🍓3.2.2、创建router目录

---

🍒3.2.2.1、创建index.js

---

import Vue from 'vue'
import VueRouter from 'vue-router'
import HellWord from '../components/HellWord .vue'//引入组件
Vue.use(VueRouter)
const routes = [//添加路由对象
  {
    path: '/HellWord ',
    name: 'HellWord ',
    component: HellWord 
  },
]
const router = new VueRouter({
  mode:'history',//hash模式带#  history模式不带# ; 推荐使用history模式,比较规范
  routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

🍒3.2.2.2、修改main.js

---

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 配置路由菜单
Vue.config.productionTip = false

new Vue({
  router,// 配置路由菜单
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10

🍒3.2.2.3、路由注册失败

---

vue.runtime.esm.js?c320:4560 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <SportHeader> at src/components/SportHeader.vue
       <App> at src/App.vue
         <Root>
1
2
3
4
5
6
7

卡住了…重新新建项目，采取手动安装，以上为选择版本2、3之后的自动安装，自动过滤掉了一些目录文件，尝试手动从头再来(心情犹如这字体颜色，布鲁😭)

🍑四、重新创建项目

---

🍊4.1、手动创建

---

• 不要全选(弯路都走过了，直接参照4.2.1来勾选)
  
• 一路回车除了有个package.json选择了一下
  
• 页面多了不少内容
  

🍊4.2、查看代码

---

对于前端小白，这才像话嘛。就是有点瑕疵,js变成ts(Typescript)了，知道Typescript选项的作用了，去掉重新建再建一次，还是习惯js

🍓4.2.1、手动创建需要勾选哪些选项

---

🍓4.2.2、重建后的项目结构

---

🍑五、总结

---

一年多了，一直在进行减肥大业，一直想做个简单的统计页面，记录自己的运动数据,同时也想巩固一下这一年接触的技术点，不过一直是后端开发，所以今天还真被为难了一把，这还没开始前端开发呢，可见后面的弯路有多长呀😂！！！

最后总结：

• 通过vue cli可以快速构建vue项目
• vue cli高版本，构建项目，目录和低版本不同
• 通过vue cli创建项目，若缺失目录，不建议手动创建目录及安装组件，很难兼容
• 可以通过vue cli手动创建项目，手动勾选需要的组件，创建所需目录