手把手教你利用脚手架搭建一个Vue工程

一个简单Vue工程的搭建
#本篇文章将带你如何使用webpack-cli脚手架搭建一个vue小工程,其实熟悉了就变得简单了,此篇文章主要帮助新手入门。具体操作图文流程如下所示:

1.Node环境安装
(1)node.js环境安装,可以从node.js中文网站进行对应镜像的选择与安装(附镜像链接如下)http://nodejs.cn/download/,具体安装流程见下面链接:https://www.runoob.com/nodejs/nodejs-install-setup.html
(2)安装好node.js可在cmd命令下查看确定其是否安装成功,具体命令如下:node -v,若命行下出现其对应版本号,则安装成功,否则可能需要重新安装;

安装成功出现版本号;
(3)安装好node.js后,其中应自带npm管理工具,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响;查看npm版本号的命令:npm -v

(4)上述一切安装成功之后,则可进行webpack的安装,命令行如下:npm install webpack -g, 若考虑网速影响,可先进行国内淘宝镜像的安装:npm install -g cnpm –registry=https://registry.npm.taobao.org
安装好此镜像之后,在进行webpack的安装:cnpm install webpack -g,确认webpack是否安装成功,可通过命令行:webpack -v 来查看,安装成功后如下:

(5)确认webpack安装成功之后:进行vue脚手架工具的安装:npm install vue-cli -g 淘宝镜像下的命令:cnpm install vue-cli -g ,安装完成后可通过命令:vue -V 来查看是否安装成功(-V是大写,这里不是打错了):

(6).当上述安装工作都已完成,则证明准备工作已经完成,可再次进行命令确认:
node -v (成功命令行返回结果:8.X.X)或其它版本号
npm -v (成功命令行返回结果:6.X.X)或其它版本号
webpack -v (成功命令行返回结果:3.X.X)或其它版本号
vue -V (成功命令行返回结果:2.X.X)或其它版本号
(7).至此基础环境已经搭建完成,接下来可进行vue项目创建: (1)选择项目所要放置的文件夹,如D盘nodeworkspace文件夹下: 在cmd下先运行: D:
再运行:cd D:\nodeworkspace 进入该文件夹,此时在此文件夹下输入创建vue项目的命令:vue init webpack vueDemo(这个是项目名,不能用中文,名称自定义)接下来会进入项目的配置命令:

? Project name vueDemo//项目名默认就是
? Project description A Vue.js project //
文档描述,会在README.md文件上生成输入的内容,默认 A Vue.js project
? Author _**** <**@.com> // 作者,如果有git,就是读取git的User信息
? Vue build standalone // 有两个选项,第一个选项写着recommended for most users果断选了(至于干什么用到并不知道)
? Use ESLint to lint your code? Yes// 是否使用ESlint 默认否
? Pick an ESLint preset Standard // 选这个一个ESlint类型
? Setup unit tests with Karma + Mocha? Yes //使用单元测试工具karma和mocha 默认是
? Setup e2e tests with Nightwatch? Yes // 使用e2e测试框架 NightWatch 默认是 配置可根据需要自定义

(8)配置完成之后,则vue项目基础搭建完成 ,
搭建完成后,进入所在工程文件夹下安装依赖,如,我的工程名叫vueDemo,并且在D:nodeworkspace目录下,则在命令行中输入:cd D:\nodeworkspace\vueDemo,再在命令行中输入:npm install (这个命令是为了安装项目所依赖的一些依赖包)最后输入:npm run dev (运行项目,默认命令,运行命令可以修改)
启动完成后在浏览器中输入:localhost:8080,出现一个类似如下图命令的界面,则表明你的vue项目搭建成功了:


利用编辑器打开该工程,可见该工程目录结构大概如下所示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值