Vue的开发都是基于NodeJS,实际开发采用vue-cli脚手架开发,vue-router 路由,vuex做状态管理;Vue UI 界面一般使用ElementUI或者ICE来快速搭建前端项目
目录
vue-cli
vue-cli 官方提供的一个脚手架,用于快速生成一个vue 的项目模板
主要功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 继承打包上线
环境
- Node.js :下载 | Node.js 中文网 安装在自己的环境目录下
- Git
确认nodejs安装成功:
cmd下输入 node -v,打印出版本号;
cmd下输入 npm -v,打印出版本号
安装Node.js淘宝镜像加速器 cmd下输入 npm install cnpm -g
cmd下输入 npm install webpack -g
注:webpack 4.X 开始,需要安装 webpack-cli 依赖 要使用这条命令。
或者根据系统提示输入 yes
npm install webpack webpack-cli -g
安装完成之后输入 webpack -v
,如下图,如果出现相应的版本号,则说明安装成功。
全局安装vue-cli,在cmd中输入命令:
npm install --global vue-cli
安装完成之后输入 vue -V,如下图,如果出现相应的版本号,则说明安装成功。
且打开C:\Users\ASUS\AppData\Roaming\npm目录下可以看到(显示隐藏目录):
开始vue-cli 应用程序
全部选n,创建完成后直接初始化,手动执行。
运行结果
初始化并运行
cd 03vue_vuejs
npm install
npm run dev
webpack
模块加载器兼打包工具,能把各种资源都作为模块来处理和使用
安装webpack
cmd输入以下指令
npm install webpack -g
npm install webpack-cli -g
测试安装成功 一般下载都是最新版本
webpack -v
webpack-cli -v
配置
创建webpack.config.js 配置文件
- entry:入口文件,指定WebPack用哪个文件作为项目的入口
- output:输出,指定WebPack把处理完成的文件放置到指定路径
- module:模块,用于处理各种类型的文件
- plugins:插件, 热更新、代码重用等
- resolve:设置路径指向
- watch:监听,用于设置文件改动后直接打包
vue-router路由
安装
npm install vue-router --save-dev
注意:
利用vue cli 新建vue2项目,安装vue-router后浏览器控制台报错,且import找不到vue-router
npm会自动下载最新版本,可以在package.json看看
解决方法: 卸载4版本的router,@指定版本装3.x的vue-router即可。
npm uninstall vue-router
npm i vue-router@3.5.2
使用
如果在一个模块化工程中使用,必须要通过Vue.use()明确地安装路由功能
import Vue form 'vue'
import VueRouter form 'vue-router'
Vue.use(VueRouter);
vue-axios同理
elementUI
新建工程
进入工程目录
cd 05vue_hello-vue
安装vue-router
npm install vue-router --save-dev
安装element-ui
npm i element-ui -s
安装依赖
npm install
安装SASS加载器
npm install sass-loader --save-dev
npm install node-sass --save-dev
启动测试
npm run dev
嵌套路由
实际应用中,一般都是多层嵌套的组件组合而成的