使用 vue-cli(脚手架)搭建项目

目录

1.搭建之前确保pc已经有node环境

2.搭建项目

2.1、选择项目位置

2.2、安装vue-cli(脚手架)

2.2、用vue-cli来创建一个基于 webpack 模板的新项目

2.3、安装项目所需的依赖

2.4、项目结构图

2.5、在内存运行项目

3.打包发布

3.1打包

3.2、 下载发布工具serve

 3.3、用工具serve发布项目

4.总结

4.1、搭建

4.2、发布

---

 

---

---

1.搭建之前确保pc已经有node环境

安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

2.搭建项目

2.1、选择项目位置

• 选择你要搭建项目在电脑所在位置并在路径栏上输入cmd并按enter键

进入dos命令行界面

2.2、安装vue-cli(脚手架)

在命令行输入命令

npm install -g vue-cli

2.2、用vue-cli来创建一个基于 webpack 模板的新项目

vue init webpack 项目名称

 创建成功如图：

2.3、安装项目所需的依赖

npm install

2.4、项目结构图

myvue
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

2.5、在内存运行项目

同样在dos命令行里

cd 项目名

 

npm run dev或者npm start

 结果：

注意：如果在下载过程中过慢建议更换为国内镜像：

1、直接切换镜像

.

2.安装cnpm

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

3.打包发布

3.1打包

npm run build

 

这时你会发现在项目文件夹中多了一个dist文件

3.2、 下载发布工具serve

npm install -g serve

 3.3、用工具serve发布项目

serve dist

 

4.总结

4.1、搭建

npm install -g vue-cli
vue init webpack myvue
cd myvue
npm install
npm run dev
访问: localhost:8080

4.2、发布

npm run build
npm install -g serve
serve dist
访问: http://localhost:5000