Vue 安装及创建 vue-cli 项目

最新推荐文章于 2024-08-04 17:07:40 发布

IT界的一颗新星

最新推荐文章于 2024-08-04 17:07:40 发布

阅读量183

点赞数

分类专栏：前端 vue 文章标签： node.js 前端

本文链接：https://blog.csdn.net/Z_p_F_520/article/details/115285252

版权

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

什么是vue-cli

vue-cli 官方提供的一个脚手架，用于快速生成一个vue项目模板。

预先定义好的目录结构及基础代码，就好比创建Maven项目时可以选择创建一个骨架xian项目，这个骨架项目就是脚手架，wo我们的开发更加快速。

根据自己电脑配置下载，下载完成后无脑下一步

这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

# -g 就是全局安装
npm install cnpm -g

# 或使用下面语句解决 npm 速度慢的问题
npm install -g cnpm --registry=http://registry.npm.taobao.org

安装过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！

cnpm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

# 这里的 myvue 是项目名称，可以根据自己的需求命名
vue init webpack myvue

一路都选择 no 即可。

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装 vue-router ，选择 no 不安装（后期需要手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 no 不安装（后期需要手动添加）
Set up unit tests：单元测试相关，选择 no 不安装（后期需要手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 no 不安装（后期需要手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 no ，我们手动执行运行结果！

安装完成后结果

# 以管理员运行 cmd 进入项目目录
cd myvue

# 安装依赖环境
npm install

# 运行项目
npm run dev

安装完以来后，项目目录下会多出一个 node_modules 文件目录

命令 run 启动项目后根据提示在浏览器输入 http://localhost:8080/ 出现 Welcome to Your Vue.js App 说明项目已安装完成！！！

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式