使用vue-cli脚手架搭建项目的基本步骤-优快云博客

本文详细介绍了如何使用Node.js和npm全局安装Vue-CLI，并通过问答方式创建Vue项目，包括安装依赖、配置环境变量和项目结构等内容。

首先
电脑必须安装 node.js 和 npm
然后全局安装 vue-cli
安装 vue-cli3

npm install -g @vue/cli

安装 vue-cli2

npm install -g vue-cli

npm install cnpm -g --registry=https://registry.npm.taobao.org

$ vue init <template-name> <project-name> // 安装用法
$ vue init webpack my-project // 这里使用 webpack 打包工具，项目的名称是 my-project

安装是用问答的方式创建项目，如果确定敲回车即可

'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
�������ļ�
? Project name my-project // 项目名称
? Project description A Vue.js project // 项目描述
? Author // 作者
? Vue build (Use arrow keys) 
> Runtime + Compiler: recommended for most users
? Vue build standalone
? Install vue-router? Yes //是否安装 vue-router
? Use ESLint to lint your code? No //是否要用 ESLint 来检查代码规范，可以使用 让代码更加规范
? Set up unit tests No //不使用
? Setup e2e tests with Nightwatch? No //不使用
? Should we run `npm install` for you after the project has been created
? Should we run `npm install` for you after the project has been created

? (recommended) npm

   vue-cli · Generated "my-project".


# Installing project dependencies ...
# ========================

最后出现这样就创建好了

# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

之后进入到项目目录中，再 npm run dev 即可启动首页面

cd my-project
npm run dev

webpack-cli的项目结构

|-- build              // 项目构建(webpack)相关代码
|  |-- build.js           // 生产环境构建代码
|  |-- check-version.js       // 检查node、npm等版本
|  |-- dev-client.js        // 热重载相关
|  |-- dev-server.js        // 构建本地服务器
|  |-- utils.js           // 构建工具相关
|  |-- webpack.base.conf.js     // webpack基础配置
|  |-- 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数据等
|  |-- data              // 群聊分析得到的数据用于数据可视化
|-- .babelrc             // ES6语法编译配置
|-- .editorconfig          // 定义代码格式
|-- .gitignore            // git上传需要忽略的文件格式
|-- README.md            // 项目说明
|-- favicon.ico
|-- index.html            // 入口页面
|-- package.json           // 项目基本信息