Vue全家桶系列教程第1期(Vue-Cli3安装Vue)

原创 请叫我羊羊 教程 Vue 54阅读 10 天前 举报

写在前面

感觉QDfuns现在不如从前了,用户好像没有以前那么多了,自从改名改图标之后,没改之前人数还是挺多的,废话不多说,Vue好像确实成为最流行的前端框架吧,最近找工作的时候好多公司的要求是需要有Vue的开发经验,或者要一个Vue熟手,大概需要前端开发岗位的公司有75%会问是不是有Vue项目开发经验,10%是问有没有react开发经验,10%的要求有没有小程序的开发经验,5%的会要求需要会angular的,这是我个人经历给出的数据,作为参考,说这么多的就是想告诉大家,前端开发已经不是一两年前你会HTML+CSS+jquery就可以找到工作的那种了,要求越来越高了,甚至有的还要你懂一些后端代码,真的是,甚至有的公司招聘前端开发的要求是掌握python,还要会linux,what's fuck,是不是还需要懂母猪的产后护理啊,恨不得招一个人就能把公司项目给撑起来,而且还那么少的钱,有这些要求的大佬肯定是有的,但是我觉的工作两三年达到要求的应该不多,工作两三年能玩熟一个前端框架,我觉的就可以了。废话说了这么多其实就想说,前端开发应该现在坑少人多,所以呢,公司要求在一直在提高,只有提高自己,才能去竞争那些为数不多的坑是不是啊,哈哈。说了这么多废话,下面进入正题,开始我的Vue学习笔记,我写这篇文章呢,也是巩固一下自己的知识,怕忘了,估计人老了吧,以前会的东西不经常用总忘。有哪里不对呢,欢迎各位大佬能够指正出来,当然讲的是基础教程大佬觉的太简单可以忽略啊。

准备工作:

1、安装Node.js(版本>8.9),这个不多说,百度node.js一路下一步
2、有自己的命令行工具 (我自己的是gitbash)
3、编辑器(我用的vscode)
4、下面命令行输入的命令我用的是蓝色加粗字体,只要按照我说的步骤都可以完成

安装Vue

1、全局安装Vuecli 在命令行中输入

npm install -g @vue/cli

2、在工作目录中运行命令

vue init webpack my-project
(注意my-project是你项目的名称看下图我这里叫VueQDfuns)

?Project name (VueQDfuns)
--这里随便输入一个简称 输入vq按回车

? Project description
--让你输入项目描述,这里直接回车就行

?Author
--项目作者,可以根据自己情况填写,我就不填了 直接回车

然后弹出下面有两个选项
Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (orany Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere
第一个是推荐大多数用户选择,第二个也不管他是什么了,他都推荐你选择第一个了,就选择第一个

? Install vue-router?
---这里问你是否安卓vue-router路由,我们先选No,如果这篇文章有下一期后期我们自己配置一下路由 输入n回车

? Use ESLint to lint your code?
---这里eslint是一个代码检查需要按照他的标准来写,我也不会ESLint 我们就不让他检查了 输入n回车

? Set up unit tests (Y/n)
--安装测试选择n回车

? Setup e2e tests with Nightwatch? (Y/n)
--这个也是e2e测试什么的选择 n 回车

? Should we run npm install for you after the project has been created? (recom
mended) (Use arrow keys)
'> Yes, use NPM
Yes, use Yarn
No, I will handle that myself
这里问选择安装依赖的方式第一个npm安装还是yarn安装,npm比较慢,我用cnpm,用cnpm安装的话选择第三个,用npm安装的话选择第一个就好,我选择第三个

这个时候你自己的目录就会出现项目了,并且里面有好多自动生成的文件看下图

这个时候在命令行输入命令 cd (项目名称) 我这里是VueQDfuns
cd VueQDfuns

回车进入项目中然后安装依赖因为vue自动生成的package.json文件我们只需要在输入命令

npm install (或者) cnpm install 根据自己二选一
我这里因为安装过cnpm 所以用cnpm install cnpm怎么安装百度下很简单的输入一条命令就行

等待安装完依赖,这时候检查项目中的文件是不是多了一个node_modules这个文件夹

在输入命令
npm run dev 或者 npm start

命令行显示这里表示vue项目已经运行成功并且部署在本地localhost:8080这里

打开浏览器输入http://localhost:8080 vue项目跑起来了是不是

目录结构

跑起来之后说下目录结构

1.build里面是webpack的配置文件一般不用细致的看他,如果想了解webpack的童鞋,可以细致的看一下或者学习一下webpack的

2.config里面也是webpack的配置文件

3.src里面是源码文件,之后我们写代码全是在src下面的目录下的

4.static放静态文件,比如说放一些需求文档接口文档啊,方便你找的东西

5.node_modules,不用说(不用管)

6..babelrc文件vue解析文件(不用管)

7..editorconfig 也是配置文件不用管(我也不知道是什么哈哈,总之不用管)

8..gitignore git的忽略文件 (不用管)

9..postcssrc.js css配置文件

10.index.html vue 主入口文件

11.package.json 依赖文件,之前输入cnpm install 就是安装里面的依赖项

12.README.md 自己的注释文件,不用说

主要我们只关心src目录下的文件,因为我们写vue代码都是在src中的
src --目录下的
assets是资源文件,比如图片字体或者独立的css文件都可以扔进去
components 组件的文件夹
App.vue 主组件
main.js 入口文件

好的整个Vue环境已经搭建起来了

下面我们看Vue脚手架搭建的项目

我们之前说过只关心项目src文件,和外面的index.html文件

vue 项目跑起来之后呢就是浏览器下localhost:8080这个地址是访问项目目录下的index.html

src目录下的main.js是入口文件,vue首先会访问这个文件打开main.js

所以main.js的意思就是 创建了一个vue实例,vue实例中需要用到App组件,用<App/>组件替换id为app的div标签

今天先说这么多把,之后会看心情继续更新的,希望你们能多多点赞评论,能让我更有动力哈 谢谢

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复