一般我们平常做小练习的时候,可以引入vue.js使用vue,但是一般做项目的时候,我们大都会用到vue脚手架,脚手架也是vue里重要的一部分,今天我们就来看看vue脚手架的相关:
1.环境搭建
1、安装node.js(傻瓜式安装,这里不再描述)
2、安装webpack 打开命令行工具输入npm install webpack -g
,安装成功后输入webpack -v
,会出现对应版本号,则表示安装成功:
4、安装vue-cli脚手架构建工具,在命令行输入:
npm installl vue-cli -g
,安装完成后输入vue -V(vue查看版本号用的是大写的V!!!),出现对应的版本号,则安装成功:2. 用vue-cli构建项目
1、首先新建一个存放项目工程的文件夹,并在该目录下打开命令行。
2、vue init webpack myvuecli
输入安装vue脚手架,注意这里的“myvuecli”是项目的名字,可以说是随便的起名,但是不能用中文!!!
下来会出现一些命令让你选择Y/N,下面大概列出来几个:
$ vue init webpack myvuecli --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 myvuecli
? Project name (myvuecli) ---------------------项目名称
? Project description (A Vue.js project) ---------------------项目描述
? Author Datura --------------------- 项目创建者
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,根据需要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no,如果选择则会对语法要求特别严格,
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm run dev
3、我们根据提示,进入创建的工程目录,cd myvuecli
,
4、安装好以后,我们打开项目文件夹,就会出现如下:
5、启动项目
npm run dev
这里提示一下:在项目进行时,命令行窗口不要关闭,窗口关闭后项目就不能在网页显示,还有,每次启动项目只需要输入npm run dev