vue脚手架搭建项目_Vue脚手架搭建以及创建vue项目

安装Node.js

Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js

只以windows系统版本为例，其他操作系统请自行下载安装。

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

Node.js安装过程(傻瓜式安装)：

步骤 1 : 双击下载后的安装包 v12.19.0，出现如下图所示：

步骤 2 : 点击 Next(下一步)，出现如下图勾选接受协议选项，然后点击Next按钮 :

步骤 3 : Node.js默认安装目录为 "C:\nodejs\" , 你可以修改安装路径，并点击 Next(下一步)：

步骤 4 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 Next(下一步)

步骤5：直接点击Next下一步即可

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步)：

步骤7：等待安装过程，然后点击完成安装即可

注：完成安装后，将安装路径添加到环境变量中即可进行全局访问

验证是否安装成功：cmd中输入：node --version,出现如下图即表明安装成功

npm(node package manager)是node的包管理工具，我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。

由于现在版本的nodejs已经集成npm所以无需安装，node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入 node --version 和 npm --version 来查看node.js和npm的版本，如果能够显示出版本，说明已经安装成功。

安装cnpm

安装cnpm代替npm,安装命令如下：

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

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，因为使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以使用cnpm稳一点。

注意：如果你发现你安装成功了，使用cnpm却发现找不到命令，就是你的环境变量有问题，在环境变量里面的path添加你node的安装路径就行，比如";C:\\nodejs\node_modules"

出现以下内容则表示cnpm安装成功：

安装VUE脚手架vue-cli

全局安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli

安装成功后使用vue --version即可验证是否够安装成功，出现如下图即表明安装成。

创建VUE项目

安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

vue init webpack my-project

cd到对应的目录下初始化vue项目,执行一下命令：

init webpack my-projectProject name 项目名 Project description 项目名描述 Author 作者邮箱 Use ESLint to lint your code? 是否需要ESlist语法检查 Set up unit tests 是否需要单元测试 Setup e2e tests with Nightwatch? Yes是否需要e2e测试

完成以上即会在指定的目录下生成vue的文件目录如下：

生成文件目录后，使用 cnpm 安装依赖，命令如下：

cnpm install

安装依赖完成过后，使用如下命令进行启动项目：

npm run dev

目录结构及其对应作用

通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境│   └── ...├── config/                     │   ├── index.js                # 项目核心配置│   └── ...├ ── node_module/               #项目中安装的依赖模块   ── src/│   ├── main.js                 # 程序入口文件│   ├── App.vue                 # 程序入口vue组件│   ├── components/             # 组件│   │   └── ...│   └── assets/                 # 资源文件夹，一般放一些静态资源文件│       └── ...├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)├── test/│   └── unit/                   # 单元测试│   │   ├── specs/              # 测试规范│   │   ├── index.js            # 测试入口文件│   │   └── karma.conf.js       # 测试运行配置文件│   └── e2e/                    # 端到端测试│   │   ├── specs/              # 测试规范│   │   ├── custom-assertions/  # 端到端测试自定义断言│   │   ├── runner.js           # 运行测试的脚本│   │   └── nightwatch.conf.js  # 运行测试的配置文件├── .babelrc                    # babel 配置文件├── .editorconfig               # 编辑配置文件├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 ├── index.html                  # index.html 入口模板文件└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 └── README.md                   #介绍自己这个项目的，可参照github上star多的项目。build/