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
此为成功
将路径复制到游览器
项目便创建好了