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

文章目录

vue-cli十分钟学习之从一无所知到糊里糊涂
- 1.为啥要学习Vue？
- 2.NodeJs安装及其npm介绍
- 3.脚手架vue-cli安装
- 4.脚手架vue-cli的HelloWorld
- 5.脚手架目录结构介绍

1.为啥要学习Vue？

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

2.NodeJs安装及其npm介绍

nodejs----->tomcat

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

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

安装

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

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

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

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

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

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

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

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

配置缓存位置，就相当于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>

安装中可能出现的问题

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

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

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

3.脚手架vue-cli安装

npm install -g vue-cli

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

E:\MavenWeb\npm-global

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

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 NPMYes, use YarnNo, 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:56I  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的入门就算是完成了，文章中可能会有不完美的地方，欢迎交流学习！

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

深度学习入门笔记（十二）：深度学习数据读取
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
python新手教程从零开始-Python零基础从零开始学习Python十分钟快速入门
原标题:Python零基础从零开始学习Python十分钟快速入门学习Python的,都知道Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python是一种动态解释型的 ...
深度学习入门笔记（十六）：计算机视觉之边缘检测
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
深度学习入门笔记（十五）：深度学习框架（TensorFlow和Pytorch之争）
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
深度学习入门笔记（二十）：经典神经网络（LeNet-5、AlexNet和VGGNet）
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
深度学习入门笔记（十八）：卷积神经网络（一）
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
深度学习入门笔记（十九）：卷积神经网络（二）
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
深度学习入门笔记（十四）：Softmax
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
深度学习入门笔记（十）：正则化
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...

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