一、使用工具
1. nodejs 、npm
2. vue-cli
3. webpack
二、webpack 在vue中的作用
1. Vue 是通过 webpack 实现的模块化,vue.js脚手架工具中就使用了webpack模板
2. webpack会对项目中所有的资源做压缩等优化操作
1、安装所需工具
(1)、安装nodejs (安装nodejs的同时,会把npm一起安装好了)
- 地址: https://nodejs.org/en/download/
- 下载LTS版本,LTS( Long-Time-Support)长期支持稳定版本,Current - 当前版本,测试中,不太稳定,所以需要下载LTS对应的版本;
(2)、检查是否安装成功
node -v
npm -v
(3)、安装vue-cli(安装vue-cli的时候会把webpack一起安装成功)
npm install vue-cli -g
(4)、查看vue-cli是否安装成功
vue list
2、初始化项目
(1)、创建文件夹并切换到创建的文件夹
mkdir projects
cd projects
(2)、 构建基于webpack模板的项目
vue init webpack 项目名
3、安装项目依赖包
需要切换到项目目录
cd vue-first
npm install
4、运行项目
需要切换到项目目录
npm run dev 或 npm start
浏览器输入网址:localhost:8080