vue2.0使用(1):创建新项目

本文介绍使用 Vue CLI 创建基于 Webpack 的 Vue 项目过程,包括安装 Vue CLI、初始化项目、配置项目结构及运行项目的方法。
vue版本:2.2.2

vue有两种项目创建方式,一种是下载vue.js,通过script标签引入即可;另一种通过vue-cli构建基于webpack的项目,这种项目构建发布需要部署node环境,不能以文件的方式直接打开。

1.全局安装vue命令行工具
npm install -g vue-cli
2.创建一个基于webpack模板的新项目
vue init webpack my-project
注:跟“npm init”类似,输入一系列项目描述与配置,可以不用配置ESLint和单元测试框架。
3.项目创建完成后再安装基础模块
cd my-project
npm install
注:第一次安装了单元测试框架,结果安装到27%就安装不下去了,然后显示失败。第二次我把单元测试框架也去掉了,很快便安装完了。
4.安装完成后运行该项目即可。
npm run dev
项目监听在8080端口,出现页面即为成功。


下图为安装ESLint和单元测试框架后的文件结构
.
|-- build                             // 项目构建相关代码
|   |-- build .js                      // 生产环境构建代码
|   |-- check-version .js              // 检查 node、npm 等版本
|   |-- dev-client .js                 // 热重载相关
|   |-- dev-server .js                 // 构建本地服务器
|   |-- utils .js                      // 构建工具相关
|   |-- webpack .base .conf .js          // webpack 基础配置(出入口和 loader)
|   |-- webpack .dev .conf .js          // webpack 开发环境配置
|   |-- webpack .prod .conf .js          // webpack 生产环境配置
|--  config                            // 项目开发环境配置
|   |-- dev .env .js                    // 开发环境变量
|   |-- index .js                      // 项目一些配置变量(开发环境接口转发将在此配置)
|   |-- prod .env .js                  // 生产环境变量
|   |-- test .env .js                  // 测试环境变量
|-- src                               // 源码目录
|   |-- components                    // vue 公共组件
|   |-- store                         // vuex 的状态管理
|   |-- App .vue                       // 页面入口文件
|   |-- main .js                       // 程序入口文件,加载各种公共组件
|--  static                            // 静态文件,比如一些图片,json数据等
|-- test                              // 自动化测试相关文件
|--  .babelrc                          // ES6语法编译配置
|--  .editorconfig                     // 定义代码格式
|--  .eslintignore                     // ESLint 检查忽略的文件
|--  .eslistrc .js                      // ESLint 文件,如需更改规则则在此文件添加
|--  .gitignore                        // git 上传需要忽略的文件
|-- README .md                         // 项目说明
|-- index .html                        // 入口页面
|--  package .json                      // 项目基本信息
.

当项目需要发布时,执行 npm run build命令来打包项目,打包后的存放在dist文件夹下。dist下的页面不能以文件的方式打开,需要通过发布后才能访问。

ps:第一次打包后,启动服务运行结果发现找不到相关的js和css,检查后发现dist前面多了一条“/”,所以需要在config/index.js里修改

将assetsPublicPath的值设为‘’;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值