系列文章目录
这里是创建移动端项目
【Vue】Vue2.x创建项目全程讲解,保姆级教程,手把手教,Vue2怎么创建项目(上)
【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,接上一篇创建Vue2项目(中)
【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置axios,utils工具包,vue.fonfig.js配置项 (下)
提示:保姆级教程,尽我所能
Vue创建项目过程+讲解每一个用法
前言
创建一个vue2的项目,工具VsCode,win10系统
一、安装nodejs
1.打开官网
nodeJS官方网站👈点我一键到达
下载左边的版本,右边的是测试版,用左边的稳定版就好了,安装教程这里不说了,无脑下一步就好了。
2.打开cmd
按住win+R键,然后输入cmd,再按回车,就会打开一个这样的页面
输入node -v,查看是否有版本号,注意中间有空格。
显示有版本号,就表示,node已经安装成功了,然后进入下一步,安装vue
3.引入vue
安装vue没有2和3的概念,只有创建的时候选择2或者3,如果说的不是请网友指正,我个人理解
链接 | |
---|---|
npm install -g cnpm --registry=https://registry.npm.taobao.org | 安装vue |
这是vue的淘宝镜像,后面加了-g表示全局安装
4.安装vue-cli脚手架
链接 | |
---|---|
cnpm install @vue/cli -g | 安装vue-cli脚手架 |
我后面建项目的时候发现这句话会出问题,但是 | npm install -g @vue/cli 这样用就没事 |
安装完成之后,在cmd里面,
输入查看版本命令
查看版本命令:npm -v
显示版本号表示ok
然后再输入查看vue-cli版本号:vue -V 注意是大写
有显示版本号就行了,接下来进入到创建项目
二、创建vue2.0项目
1.打开文件管理(此电脑)
图片如下(示例):
找一个你要放代码块的地方,然后在路径栏,输入cmd,系统就会自动跳进去这个路径下的cmd
看不懂的没关系,往下看:
系统打开cmd界面,并且显示路劲为刚刚看到的路径
2.创建vue
示例如下(示例):
输入创建vue的指令:
vue create demo002 (demo002是你创建项目文件夹名字)
千万不要写反了
名字可以随意起,但是一定要符合规定,写好就按下回车就好了
例如,我创建名字为vue-demo的项目
显示这个界面,好的我们进入下一个阶段
3.自定义选择安装vue(看重点)
由于这个界面太黑了,看着眼花,我用PowerShell来演示,效果跟这个cmd是一样的,方便观看
选择最后一个,然后按回车
我们进入自定义安装,主要是熟悉了解这些属性
- Choose Vue version 选择当前版本,有些人没有,是因为它装的是最新版,我去年就装过vue了,所以是旧版本,这个选中就行
- Babel 基础,必选
- Router 这个是路由,装上吧,可以不装,后面手动装,不过最好是装上,项目演示,我就装上了。大家也装上
- VueX 用来控制状态的,说通俗点,例如它是用来管理session之类的,就应该明白了吧
- CSS 这个必装,对我来说是的,后续我会讲解到用法。
- Linter,我喜欢叫它ESLinter 它是个代码检测的插件,什么意思?就是你代码不工整,多一个空格都给你报错那种,所以,谁用谁知道。我不建议开,开了我代码格式刷就不能用了
好的,简单解释一下了,说的不好请网友指正。
用↑ ↓键控制,用空格选中或者不选中,回车进入下一步
如果不会那就跟我选一样的就好了。
选了别的下一步出现了其他的东西我这里可就讲不到哦
4.选择Vue版本(2.X或者3.x)
我这里演示的是Vue2版本
进入到下一步
这个是vue路由的模式选择,history和hash两种模式。这里问的是你要不要用历史模式(history),用了的话,你的项目运行之后,就没有那个#符号了,所以选择拒绝。
Y是同意,n是拒绝,我这里选拒绝,输入n,
Less有什么用?这个后面会讲(又挖了个坑没填)
然后按回车进入下一步
选择package.json,然后回车
我输入N,并不想保存,创建项目作为程序员基本的功夫,能手动就手动,防止以后都不会创建了
然后输入N之后,就开始加载了
这里表示,项目正在创建中
5. Vue项目创建完成(2.X)
如果你看到这里,并且与下图显示一样,那么恭喜你,项目创建完成了!
如何运行?
这里显示的cd vue-demo表示,进入到这个项目里面去,
然后npm run serve
就是运行指令,就是用来运行这个Vue项目的,如果看不太明白,建议看一下Vue的简单介绍
教程偏新手化,但是不包含喂饭服务,概念化问题以及Vue能用来干嘛的这里就不说了。
6. 运行刚刚创建的Vue项目
它已经给出了提示,cd vue-demo
表示,你先进入到这个路径里面去。
好的我们先写这个指令,进入
进入之后,再运行
npm run serve
在浏览器的域名里面输入以下,即可发现新世界的大门
http://localhost:8080/
总结
提示:这里对文章进行总结:
例如:现在是晚上的十一点钟,先写这么多吧,明天有时间再出下。