最近一直在学习前端,慢慢的向前端靠拢,说到前端,目前最火的的两个框架就属Vue和react,这两个前端前端框架如果想要从事前端开发的小伙伴,就必须要会其中的一个。
而我直接就选择了Vue,这个和我的工作环境有关,作为一个前端的小白,首先要做的从零开始搭建一个Vue项目。
这里我们主要介绍,vue-cli2和cli3的项目创建过程
好了废话多说,开始进入正题
第一步 node.js的安装
前端开发node.js是必不可少的,那什么是node.js呢?
看到Node.js这个名字,初学者可能会误以为这是一个Javascript应用, 事实上,Node.js采用C++语言编写而成,是一个Javascript的运行环境。
Node.js是一个后端的Javascript运行环境(支持的系统包括Linux、Windows),这意味着你可以 编写系统级或者服务器端的Javascript代码,交给Node.js来解释执行
想对node.js了解更多的话,大家可以查看下面链接的博客,介绍的很详细,刚开始开发的话,我们不需要会node.js,但是如果我们想要更好的提升自己,进一些大公司node.js就必须要会了,如果没有太高的要求,那么不会node.js也没有关系,我们只需要简单的使用即可。
链接:https://www.jianshu.com/p/6062ee5354be
那么node.js如何下载呢
下载链接:http://nodejs.cn/download/
大家根据个人的电脑寻找对应版本下载即可,由于我使用的是Mac,所以下面的讲解都是基于Mac的安装,前端开发其实Window、Mac没啥太大区别,所以不用纠结如何安装,安装完在向下进行。
第二步 npm 和cnpm(安装)
npm是node.js里面的一个工具,它主要负责的就是node插件管理(包括安装、卸载、管理依赖、包管理等),所以在开发过程中,node.js可以不会但是npm常用的命令我们是必须要会的。
那么npm和cnpm有什么区别呢?
由于npm安装插件是从国外的服务器进行下载,容易受到网络影响,容易出现异常,所以我们淘宝团队分享了使用国内的镜像来代替国外服务器,这样就不会很大程度解决了npm的网络问题,这就是cnpm,除了这里不一样以外,npm和cnpm可以说是一摸一样。
1、这里呢我就使用cnpm,首先我们打开终端,然后输入下面命令开始安装
npm install -gD cnpm --registry=https://registry.npm.taobao.org
2、到这里回撤即可,然后我们就进入等待即可,直到安装完成(下面的内容是命令中每个字母对应的内容)
npm install -gD cnpm --registry=https://registry.npm.taobao.org
这个命令的-g(global)的作用就是全局安装,可以在命令行下直接使用
-D(--save--dev)的作用就是代表环境了,代表的是devDependencies本地环境和线上环境,通常情况下我们都是直接使用D,其实看个人习惯,我习惯是 --save --dev,看着更直观
-S(-save)安装包信息将家在到dependencies(生产阶段)可以理解为线上
在上面的命令行使用-D的话直接在-g后面加上D代表devDependencies
3、出现下图就是开始进行安装,这个过程我们只需要等待即可。
4、安装的过程可能会出现下面的报错
这个报错的原因就是没有管理员权限
解决方案:在命令行前面添加sudo获取管理员权限,输入管理员密码就行
例如:
sudo npm install -gD cnpm --registry=https://registry.npm.taobao.org
参考链接:https://blog.csdn.net/shaleilei/article/details/80812410
到这里,我们就完成了cnpm的安装。
5、完成后我们在终端继续输入
npm -v
查看版本既可。
这里在介绍几个常用命令
//1.卸载原有旧的版本:(如果使用-gD,那么卸载也一定要加上-gD,下面命令同理)
npm uninstall -g cnpm --registry=https://registry.npm.taobao.org
//2.注册模块镜像:
npm set registry https://registry.npm.taobao.org
//3.node-gyp 编译依赖的 node 源码镜像
npm set disturl https://npm.taobao.org/dist
//4.清空缓存
npm cache clean --force
//5.重新安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
参考链接:https://www.jianshu.com/p/c46d1f69a76b
第三步 Vue-cli的安装(这里包括了,cli2和cli3,我们先处理cli2)
创建纯Vue项目我们就需要Vue-cli做脚手架,搭建项目,Vue-cli的作用就是帮我们直接搭建一个完整的项目框架
vue.js 著名的全家桶系列, 包含了, vue-router, vuex, axios。
再加上 vue-cli 就是一个从 路由,数据流管理。
http请求都有的核心项目,vue 社区的丰富资源,也是满足了我们日常开发中的需求了。
vue-cli 这个构建工具大大降低了 webpack
的使用难度,开箱即用的特性,大大降低了我们的学习成本,加快了我们的开发速度。
cli2
1、vue-cli的的安装命令抓有两个,分别对应npm和cnpm
npm install -gD vue-cli
cnpm install -gD vue-cli
如果有需要我们也可以在上面命令-g后面添加d,配置环境也可以,注意:上面的两个命令可能也会出现报错,解决方案和第二步的一样加上管理员权限sudo即可
一共20个步骤,安装完成既可,整个过程0干预
cli3 ,它前面的工作都是一样的,到了这里才有区分
1、cli3的安装
sudo cnpm install -gD @vue/cli
安装过成也是0干预,我们只需要等待 即可,安装过程如下
一共35个包安装完成后效果如下
2、然后我们用命令行查看版本,如果能查询版本号,代表安装成功,注意V要大写
vue -V
第四步 项目创建 (这里包括了,cli2和cli3,我们先处理cli2)
cli2
1、创建项目就一个命令,但是期间可能涉及到开发者参与
vue init webpack projectName
这里webpack就是我们项目的开发模版,vue开发有很多模版,其中webpack是使用最多的,也是主流,这里我们就是webpack
在创建项目的过程中,需要我们的干预,我们主要有两个注意事项
第一个 Install vue-router?(Y/n),是否安装vue-router,这个就是官方路由,主要负责就是我们页面之间跳转、返回等,这里我们直接选择Y即可。
第二个 Use ESLint to lint your code?(Y/n)是否使用ESLint管理代码,ESLint是一个代码风格管理工具,是用来统一代码风格的,一般项目都会使用(尤其是大项目,例如:代码缩紧是一个空格等),但是这里我只是自己学习,这里我就选择N了
2、下面我们就开始创建项目了
1、首先我们在桌面创建一个文件夹,这个文件夹我们就用来专门存放Vue项目,例如名字就叫做:VueProject
2、然后我们通过终端命令进入这个文件夹即可
cd Desktop/VueProject/
3、就是用命令创建项目了
vue init webpack test1
注意,这里可能出现创建项目的失败,那如何解决呢?
就是vue-cli的重新安装即可
cnpm install -gD vue-cli
4、在安装过程中会出现上面说的两个注意点
? Project name jixun //工程名字
? Project description A Vue.js project //项目描述
? Author wql //作者
? Vue build standalone //默认回撤,
? Install vue-router? Yes //路由上面的第一点
? Use ESLint to lint your code? No //代码规范ESLint,第二点
? Set up unit tests Yes //默认回撤,
? Pick a test runner jest //默认回撤,
? Setup e2e tests with Nightwatch? Yes //默认回撤,
? Should we run `npm install` for you after the project has been created? (recommended) npm //默认回撤
剩下的就是等待项目创建完成即可。
cli3,创建分为有两种,一种是UI可视化创建,另一种是命令好创建
1、可视化创建
1、命令行输入下面命令
vue ui
2、执行完成会自动打开一个网页进行项目的创建,效果如下
3、这里我们可以根据需求选择
剩下的根据个人需求自行选择,因为是可视化创建项目,所以很简单,相反正是由于可视化他的效率要比命令行的方式低很多,个人推荐命令行设置。
2、命令行
1、创建项目
vue create project
效果如下,选择内容根据个人选择即可,
2、完成选择后进入等待处理,这里我们0干预
3、当出现下面的效果图,就代表羡慕创建完成
第五步 项目运行(这里包括了,cli2和cli3,我们先处理cli2)
cli2
1、这里项目创建完成后,会自动给我提供两个命令
2、我们根据提示执行即可,按照命令执行完成会给我们提示下面内容
上面说的很明确,就是:你的应用可以在这个链接下运行
所以我们只需要将这个链接粘贴到浏览器运行即可。
3、当出现下面的页面,就说明我们的项目已经创建成功了,并运行了
4、出现这个界面就说明项目已经搭建完成了,我这开发工具使用的是VSCode(Visual Studio Code),而代码目录如下
cli3
1、这里项目创建完成后,会自动给我提供两个命令
2、执行完成后,会出现下面效果
这里其实和cli2基本一样,然后我们选择
http://localhost:8080/
3、运行即可,出现下面图片就代表项目已成功运行
4、cli3创建的项目就会更加简介了
到此,一个完整的Vue项目搭建就是彻底完成了,特此记录一下,希望对像我一样的小白有帮助。
总结
其实cli2和cli3说这么多,如果顺利的话实际上就三步
1、sudo npm install -gD cnpm --registry=https://registry.npm.taobao.org 2、cnpm install -gD vue-cl 或者 cnpm install -gD vue-cli 3、vue init webpack projectName 或者 vue ui(可视化安装) 或者 vue create project
这三步完成,其实项目就已经创建完成了
Vue开发会持续更新。。。,感兴趣的小伙伴可以留意一下