Vue专题（一）基于 webpack 模板创建的vue项目

1. 测试环境 win+r输入cmd进行环境检测

node -v
npm -v
git --version

2. 环境都安装无误后在项目文件中右键 Git Bash Here或者右键点击 Visual Studio Code，选择属性-兼容性-以管理员身份运行

3. 全局安装vue-cli脚手架

npm install -g @vue/cli

4. 基于webpack创建新项目

// 创建项目（project为项目名称）
vue init webpack project

// 会存在提示让再次安装 npm install -g @vue/cli-init 直接进行安装
npm install -g @vue/cli-init
// 再次创建项目就好
vue init webpack project

// 已存在相关文件夹，是否添加到这个文件夹 Y(如果没有创建过，不会出现这行)
? Target directory exists.  Continue? (Y/n) Y

// 项目名称 可以直接回车
? Project name(project)

// 项目描述 可以直接回车
? Project description (A Vue.js project)

// 作者是谁 可以直接回车
? Author ( xuezepeng <[email protected]> )

// 编译方式 选择第一个
? Vue build (Use arrow keys)
  Runtime + Compiler: recommended for most users
> Runtime-only: about 6KB lighter min+gzip, but templates ( or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

// 是否使用vue路由 Y
? Install vue-router? (Y/n) Y

// 使用EsLint去管理代码 Y
? Use EsLint to lint your code? (Y/n) Y

// 代码监测规范 选择第一个
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)  
  
// 是否进行单元测试 n
? Set up unit tests (Y/n) n

// e2e 端到端测试 n
? Setup e2e tests with Nightwatch? (Y/n) n

// 使用npm做项目的包管理还是别的 npm
? Should we run `npm install` for you after the project has been created? (recommened) (Use arrow keys)
> Yes, use NPM
  Yes, use Yran
  No, I will handle that myself

5. 在项目文件夹中打开终端加载依赖

npm install

Vue专题（一）基于 webpack 模板创建的vue项目

猜你喜欢