1.假设Vscode、nodejs等已经安装好了。
2. 插架安装:vuetur,open in brower
3.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。
安装命令:
npm install -g vue-cli
打开VsCode的终端Terminal,输入上述命令,等待安装完成。
3. 安装webpack,一个打包js的工具。
安装命令:
npm install -g webpack
4. 创建vue项目
webpack安装完成之后,就可以开始创建vue项目,首先创建一个文件夹用来存放你的项目。
创建项目命令:
vue init webpack vue-demo1
其中vue-demo1就是项目名称,创建过程中,如果失败,再试一次。
接着会出现一些配置项,可有根据需要配置,也可以默认,直接按回车就行。
然后继续等待安装依赖项。完成之后,一个基本的vue项目就搭建完了。左边可以看到搭建的vue项目,其中main.js就是入口。
5. 启动项目
cd 到 vue-demo1 目录下
启动命令:
npm run dev
成功之后,浏览器输入:http://localhost:8080,就看到成功界面了。
6. 项目打包发布上线
打包命令:
npm run build
完成之后,项目文件夹中出现一个dist文件夹,里面就是打包之后的内容,直接部署就好。