1.配置node环境
1)下载node安装包并安装
2)安装完成之后在配置node的环境变量
3) 查看node是否安装成功:
win+r 进入输入cmd进入命令行,输入 node -v 命令 ,安装成功之后会显示node的版本号
在命令行,输入 npm -v 命令 ,查看npm的版本号
2.安装webpack
命令行工具输入:npm install webpack -g 全局安装webpack,安装完后输入:webpack -v,出现版本号则标识安装成功
3.安装vue-cli脚手架
全局安装vue脚手架,命令行工具输入:npm install vue-cli -g,安装完后输入vue -V(此处必须大写“V”),出现版本号则标识安装成功
4.创建vue项目
1)打开命令行工具,进入放项目的文件夹,输入命令:vue init webpack mysite(其中webpack是模板名称),会在当前目录下生成一个mysite项目文件夹
2)进入项目文件:cd mysite,安装项目依赖:npm install(如果失败,则用淘宝镜像源:cnpm install)
3)安装vue路由模块vue-router和网络请求模块vue-resource:cnpm install vue-router vue-resource --save
4)启动项目npm run dev,默认会直接打开一个页面,或者在浏览器中输入http://localhost:8080
5.项目目录结构
bulid目录是webpack相关配置文件,已配置好,一般不需要修改
config是vue项目的基本配置文件,配置端口,打包输出等
node_modules是项目中安装的依赖模块
src项目核心文件,自己写的代码都在这里
>>assets静态资源,如css,less,sass,一些外部的js文件以及图片等
>>components公共组件
>>router路由,配置项目路由
>>App.vue根组件
>>main.js入口文件
static静态资源
test测试文件夹
6.使用element-ui前端ui组件
1)打开命令提示工具,安装element-ui:npm i element-ui -S
2)main.js中引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
6.打包上线
项目开发完成后,在命令行中输入npm run build进行打包,打包完成后会生成dist文件夹,可以本地直接查看。
项目上线时,将dist文件夹放到服务器即可