Vue-创建项目

1.Vue-cli安装使用

1.1 安装前提

确保你已经安装了 Node.js。Vue CLI 需要 Node.js 运行环境来安装和运行。你可以在 Node.js 官方网站下载适合你操作系统的安装包并进行安装(也可以在本人主页找到，标题为Vue-nodejs环境搭建)。

在命令行中输入以下命令检查 Node.js 和 npm（Node.js 的包管理器）是否安装成功：

node -v
npm -v

如果能正确显示版本号，则说明安装成功。

1.2安装Vue-cli

在命令行中输入以下命令：

   npm install -g @vue/cli

-g 表示全局安装，这样你可以在任何地方使用 Vue CLI 命令来创建项目

npm 会从默认的 npm 仓库下载 Vue CLI 及其依赖项，并安装到全局环境中。这个过程可能需要一些时间，具体取决于你的网络速度。

检查安装是否成功

安装完成后，可以在命令行中输入以下命令来检查 Vue CLI 是否安装成功：

vue --version

如果能正确显示 Vue CLI 的版本号，则说明安装成功。

2.创建项目

找一个合适的位置打开黑窗口，注意路径上最好不要有中文

vue init webpack xxx

[xxx]为自己的项目名称

注：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致, 修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001, 切换回中文：chcp 936, 这两条命令只在当前窗口生效。

接下来，安装程序会进入一问一答的安装模式：
1）Project name：项目名，默认是输入时的那个项目名称[xxx]，不修改直接回车
2）Project description：项目描述，直接回车
3）Author：作者，随便填或直接回车
4）Vue build：选择题，一般选第一个
5）Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
6）Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。学习者选N
7）Set up unit tests：是否安装测试 N
8）Setup e2e tests with Nightwatch?：是否安装e2e测试 N
9）Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
        > Yes, use NPM (选择该项即可)
        > Yes, use Yarn
        > No, I will handle that myself

全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成
#Project initialization finished!
#========================

输入命令检验

dir

3.导入HBuilder X 

3.1 打开目录，找到项目的位置并导入

此为创建好的项目的目录结构

3.2 运行检验

法一：右击文件-外部命令-2 npm run dev

法二：该文件黑窗口中输入命令

npm run dev

此为成功

将路径复制到游览器

项目便创建好了