vue-cli十分钟学习入门笔记――开袋即食

vue-cli十分钟学习之从一无所知到糊里糊涂

1.为啥要学习Vue？

​ **为啥？：**不知道有多少人是因为写着后端代码，有着前端的梦，后端代码实在写多了冷冰冰无法满足的好奇心，这是我为什么学习前端vue框架的原因。这篇当作自己的笔记，供大家参考。

2.NodeJs安装及其npm介绍

nodejs----->tomcat

npm(Node Package Mangage)----->maven

不知道这样解释合不合适，不过像是在网上能够看到的大多解释一样，确实上述的两个类比很合适，nodejs，tomcat都是给程序一个运行的环境。npm，maven都是用来管理包，文件的工具。如果学习过后端的知识，可以直接这样理解。

安装

a.

https://npm.taobao.org/mirrors/node/v8.17.0/node-v8.17.0-x64.msi

上面的地址是windows的64位的安装版本，推荐大家直接使用这个安装版本，因为安装版本会帮你自动配置环境变量。

我这里提供的是v8.17.0版本是我自己使用的版本。我把下载链接提取出来了点击上面的连接就可以直接下载了。

安装过程只需要定义一下安装目录，接下来就是一路next。

b.

管理员权限打开cmd输入node -v，如果出现了版本号那么你的nodejs环境就算是安装好了。

C:\WINDOWS\system32>node -v
v8.17.0
C:\WINDOWS\system32>    

c.

配置淘宝镜像，国外的镜像下载比较吃力，换成淘宝的大腿。(安装默认好像就是淘宝的镜像，不过保险更换一下)

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

d.

配置缓存位置，就相当于maven的本地仓库，使用包管理工具了肯定需要设置个仓库给装各种在淘宝镜像拉回来的包啊什么的。

这里我直接使用的MavenWeb这里不是说是maven，我是为了方便自己，可以随便改自己想要的名字

# 缓存：
npm config set cache "E:\MavenWeb\npm-cache"
# 依赖,可以在这里位置找到你下载的具体的包，如等下会下载的vue-cli：
npm config set prefix "E:\MavenWeb\npm-global"

e.
完成上面的步骤后可以使用下面的命令查看安装是否正确

npm config ls

下面标出来的地方大家需要注意

C:\WINDOWS\system32>npm config ls
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.13.4 node/v8.17.0 win32 x64"

; userconfig C:\Users\Uing190126\.npmrc
cache = "E:\\MavenWeb\\npm-cache"            《------查看是否配置成功
prefix = "E:\\MavenWeb\\npm-global"          《------查看是否配置成功
registry = "https://registry.npm.taobao.org/"《------查看是否配置成功

; builtin config undefined

; node bin location = D:\1ForJavaTool\node\node.exe
; cwd = C:\WINDOWS\system32
; HOME = C:\Users\Uing190126
; "npm config ls -l" to show all defaults.


C:\WINDOWS\system32>   

f.

安装中可能出现的问题

​ **1：**cmd输入命令没有反应。

​ 可能的原因1：你的环境变量配置出现了问题，打开你的安装根目录，配置到环境变量Path中

​ 可能的原因2：你的cmd可能需要管理员权限(我自己遇到的)，你需要关闭cmd重新使用管理员权限打开

3.脚手架vue-cli安装

a.

npm install -g vue-cli

b.

配置环境变量，其实就是将前面配置的本地仓库配置到环境变量Path中去，让电脑能够识别“vue”命令

E:\MavenWeb\npm-global

c.

验证安装结果,出现版本号就没问题

C:\WINDOWS\system32>vue --version
2.9.6
C:\WINDOWS\system32>  

4.脚手架vue-cli的HelloWorld

我使用的是WebStorm来作为开发IDE，以管理员身份打开IDE。

**1.**命令行输入，新建一个项目myvue

vue init webpack myvue

**2.**配置如下

E:\WebstormProject>vue init webpack myvue
? Project name myvue
? Project description A Vue.js project
? Author mwhe-lrving <2598121166@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

然后就会下载一些配置文件，等待它下载完成，当出现下面的文字 ，就说明安装完成

# Project initialization finished!
# ========================

我们就可以在项目目录看到一个对应的myvue项目

3.因为我们当前在全部项目的根目录，所以我们进入到myvue的目录，再执行npm start

E:\WebstormProject>cd myvue
E:\WebstormProject\myvue>npm start

最后我们会看到这样的一行,说明我们的脚手架项目启动完成，在端口8080开启服务，我们可以直接点击http://localhost:8080查看启动的脚手架项目

 DONE  Compiled successfully in 2708ms                                              11:01:56
 I  Your application is running here: http://localhost:8080

5.脚手架目录结构介绍

这里介绍几个入门需要重点了解的

• myvue/src/assets文件夹

  用来存放静态文件，比如初始化生成的logo.png

• myvue/src/components文件夹

  用来存放自己写的组件，比如以后写的页面啊，公用组件都可以放在这里

• myvue/src/router

  目录下面有一个index.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import HelloWorld from '@/components/HelloWorld'//将components目录下写好的HelloWorld.vue导入进来
  
  Vue.use(Router)//注册Router到Vue中，保证能用路由来访问页面
  
  export default new Router({
    routes: [
      	//当我们在浏览器的地址栏输入http://localhost:8080/#/
          //也就是path对应的请求路径就可以在浏览器渲染HelloWorld.vue
       	//可以自己根据项目的需要自己配置路由
        {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      }
    ]
  })
  
  

• myvue/src/App.vue

  项目的主入口，我将它理解成一张床，后续的Dom都在上面进行切换渲染

  <template>
    <div id="app">
  	//我将<router-view/>理解为一个锚点，提供给其他的页面进行定位渲染，最后变换的都是<router-view/>
      <router-view/>
    </div>
  </template>
  <script>
  export default {
    name: 'App'
  }
  </script>
  <style>
  </style>
  

• myvue/src/main.js

  main.js的作用就是将各种组件注册到Vue让他可以使用

  import Vue from 'vue'
  import App from './App'
  import router from './router'
  import axios from 'axios'  		//这里我引用了一个请求框架
  
  Vue.config.productionTip = false
  Vue.prototype.$http=axios;		//并在这里引用使用框架
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  
  

• hello/package.json

  相当于springboot的pom文件，定义了一些项目以及项目需要的包的信息

到此vue-cli的入门就算是完成了，文章中可能会有不完美的地方，欢迎交流学习！