Vue初始化项目结构

一、使用工具
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