Vue学习——使用vue-cli搭建一个简单的本地vue项目
前提
- 安装好node.js、npm、vue-cli。为什么要先安装这些,建议查看https://www.cnblogs.com/zuiyue_jing/p/10673875.html,这个对于vue-cli理解很重要。
步骤
- 安装node.js
- 搜索node.js进入官网,直接下载node.js安装即可。
- 安装好之后,打开控制台,输入node -v命令,命令行显示出node.js版本就安装成功。
- Next
- 搜索node.js进入官网,直接下载node.js安装即可。
- 安装npm
- 安装好node.js之后,npm自动安装好。安装好之后,打开控制台,输入npm -v命令,命令行显示npm版本就安装成功。
- Next
- 安装vue-cli
- 进入cmd控制台,输入命令npm config set registry https://registry.npm.taobao.org(网速好,此步骤可省略,直接进入到下一步)
- 进入cmd控制台,输入命令npm install -g vue-cli安装vue-cli。
- 安装好之后,输入命令vue -V(注意V大写)查看vue-cli是否安装成功)。
- Next
- 创建项目
- 打开cmd,进入想要创建项目的目录
- 进入目录后,输入命令 vue init webpack project-name
- project-name是你打算创建vue项目的名称
- 输入命令之后,cmd会自动下载webpack模板,然后出现几个关于项目信息配置的步骤,依次输入即可
- Project name:项目名称,此处你可以选择更改,直接按下回车键,自动默认为初始输入的项目名称test-project
- Project description:项目描述,自己输入
- Author:项目开发人员
- Vue build:项目构建模式,默认即可,按下回车
- Install vue-router:项目是否安装vue路由,选择yes,进行安装
- Use ESLint to lint your code:是否选择ESLint开发验证功能,新手选择no
- Set up unit tests:是否开启单元测试,建议选择y,在后期开发中一定会用到的
- Pick a test runner:选择开启单元测试,就会有选择测试方式,默认即可
- Setup e2e tests with Nightwatch:是否开启e2e测试,选择no
- Should we run 'npm install' for you after the project has been created
- Yes,use NPM:选择这个代表在项目初始化后,会自动使用NPM联机下载项目所需要的插件
- Yes,use Yarn:择这个代表在项目初始化后,会自动使用Yarn联机下载项目所需要的插件
- No,I will handle that myself:后期手动下载项目所需要插件
- 网速好,建议选择“Yes,use NPM”,网速不好,建议选择“No,I will handle that myself”
- 项目创建之后,我们可以看到文件目录如下
- 注意,红色框标记的文件夹,如果在创建项目时,没有选择“Yes,use NPM”,这个文件夹是不存在的。
- Next
- 安装插件(如果在创建项目时最后一步选择“Yes,use NPM”,此步骤可略过)
- cmd进入到项目根目录,输入命令npm install,开始自动下载项目所需插件。
- 插件下载完成后,你讲会看到上面的完整项目目录。
- 运行项目
- cmd进入到项目根目录,输入命令npm run dev,如下图
- 浏览器访问http://localhost:8080/,出现下图项目搭建成功,在此基础上开发自己想要的项目即可。
- Next
- Next