Vue.Demo搭建(迈出第一步)

环境准备

node环境

npm环境

vue-cli环境

创建工程

vue init webpack 项目名称

项目名称都是小写字符

vue init webpack demo1

Vue.Demo搭建(迈出第一步)_第1张图片

备注:

Project name:项目名称,只能全小写,为什么必须全小写,据说是方便不同系统之间的移植(可移植性?)

Project description:项目说明,随意啦,默认也行

Author:作者名

Vue build:默认选中了Runtime + Compiler(运行时编译),既然他推荐这个,那咱默认

Install vue-router:是否安装官方路由?嗯,装(除非你打算自己写一个)

Use ESLint to lint your code:一种代码规范检测

Pick an ESLint preset:初始化一个代码风格(我这里只能选 Standard 和 AirBNB 两种)

Set up unit tests:安装单元测试。嗯,装

Setup e2e tests with Nightwatch:e2e(自动化)测试。emmmmm,自己决定。。。

工程目录

参考:https://blog.csdn.net/Sindyue/article/details/104051363 的工程目录介绍。

Vue.Demo搭建(迈出第一步)_第2张图片

 安装依赖

如果工程使用了第三方包,就需要执行这一步。

pm install

 会生成文件夹node_modules

Vue.Demo搭建(迈出第一步)_第3张图片

 启动项目

开发环境启动

npm run dev

访问:http://localhost:8080/#/

Vue.Demo搭建(迈出第一步)_第4张图片

打包

npm run build  项目打包

Vue.Demo搭建(迈出第一步)_第5张图片

生成目录:

Vue.Demo搭建(迈出第一步)_第6张图片

文件夹名称有如下配置决定:

Vue.Demo搭建(迈出第一步)_第7张图片 部署

参考文章

vue的安装及简单工程创建

https://blog.csdn.net/Sindyue/article/details/104051363

vue简单工程构建

https://blog.csdn.net/chen548246/article/details/84031817


你可能感兴趣的:(前端,Vue)