第一种方式:
1、下载安装node.js,检查是否成功:
node-v # 或 npm-v
2、搭建项目:
2.1、第一种方法:用iview脚手架建项目
打开iview官网==>生态 ===>iview cli==>进行下载iview脚手架,
下载后进行创建项目
2.2、第二种方法:命令行进行创建
2.2.1、全局安装vue-cli
npm install -gvue-cli
2.2.2、全局安装webpack
npm install -g webpack
2.2.3、安装webpack的本地webserver
npm install -gwebpack-dev-server
2.2.4、下载iveiw组件库
npm install --save iview
2.2.5、下载axios
npm install axios npminstall --save vue-axios
2.2.6、下载饿了么组件库
cnpm install element-ui --save
2.2.7、搭建项目(你想把项目发到那,就切换到那块下载)
vue initwebpack 项目名称
3、切换到你所在的项目,运行项目
npm run dev
4、编辑项目时,我建议用HBuilder
5、下载好后,项目如下图所示:
6、比较关心的的几个文件:
- src下的assets:存放静态文件;
- src下的components:写页面;
- src下的router下的index.js:配置路由;
- src下的main.js:前端的主入口,主要是写配置。
注意:对于新引进来的东西,需要在index.js和main.js下引用才方可使用。
7、如果觉得npm速度不快,可下载cnpm
npm install -g cnpm-registry=http://registry.npm.taobao.org
第二种方式:
1、检测是否安装好nodejs和npm,检测命令
node -v
npm -v
如果没有安装需要先安装
nodejs的下载路径:https://nodejs.org/en/download/
在Windows上安装时务必选择全部组件,包括勾选Add toPath。安装完成后,在Windows环境下,请打开命令提示符,然后输入node -v,如果安装正常,你应该看到 版本号输出。
npm是Node.js的包管理工具(package manager),Nodejs的安装程序默认安装npm,在命令提示符或者终端输入npm -v,可以看到类似以下的输出:
在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
npm i -g cnpm --registry=https://registry.npm.taobao.org
即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了,如果权限不够,请使用管理员运行命令提示符安装淘宝npm镜像。
2.安装vue-cli,vue脚手架
cnpm i -g vue-cli
测试是否安装成功:
vue -V
3、项目安装和创建
3.1、安装项目
首先进入工作目录(如果不在工作目录),使用cd 命令,进入工作目录,使用脚手架安装项目:
vue init webpack first_vue
控制台显示:
提示目录已存在,是否继续:Y
Project name(工程名):回车
Project description(工程介绍):回车
Author:作者名
Vue build(是否安装编译器):回车
Install vue-router(是否安装Vue路由):回车
Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n
Set up unit tests(安装测试工具):n
Setup e2e tests with Nightwatch(测试相关):n
Should we run `npm install` for you after the project hasbeen created? (recommended):选择:No, I will handle thatmyself
3.2、初始化项目
进入项目目录
cd firstVue
初始化项目
cnpm i
运行项目
cnpm run dev
3.3、安装vue-router
cnpm i vue-router
浏览器打开:localhost:8080,即可打开vue项目
Ctrl+C退出运行
4、配置idea
- File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认;
- File - Settings - Plugins:搜索vue,安装Vue.js;
- Run - Edit Configurations...:点击加号,选择npm,Name为Run,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了;
- 继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。
5、安装使用stylus(是一种健壮的css)
cnpm install --save-dev stylus stylus-loader