Webpack+Vue2项目结构生成

lpe234

发布于 2020-07-27 17:24:36

3080

发布于 2020-07-27 17:24:36

文章被收录于专栏：若是烟花若是烟花

Webpack+Vue2项目结构生成

参考文档：

Vue2.0 新手完全填坑攻略

Vue2.0+Vue-router2.0+Vuex2.0搭建简书

基本需求

nodejs环境
- 参考：https://nodejs.org/en/
npm和cnpm(node依赖包管理)
- 参考：https://npm.taobao.org/ npm install -g cnpm –registry=https://registry.npm.taobao.org
webpack安装 cnpm install webpack -g
Vue脚手架 npm install vue-cli -g

项目结构创建

假设基本需求已满足，即可继续执行以下步骤

简单webpack结构创建

vue init webpack-simple 项目名称(不要使用中文)
# 创建vue1.0的项目
vue init webpack-simple#1.0 项目名称(不要使用中文)

示例如下：

# 1. 创建
➜  Projects vue init webpack-simple yj-fighting

? Project name yj-fighting
? Project description A Vue.js project
? Author lpe234 <lpe234@qq.com>
? Use sass? Yes

   vue-cli · Generated "yj-fighting".

   To get started:

     cd yj-fighting
     npm install
     npm run dev.

# 以上输入项，根据需求自行选择

# 2. 切换到项目内部
➜ cd yj-fighting

# 3. 安装依赖
➜ cnpm install

# 4. 运行开发环境
➜ npm run dev