Vue系列十四：创建vue项目

我会带着你远行 2022-01-30 06:36 275阅读 0赞

一、说明

1.  vue-cli 是 vue 官方提供的脚手架工具
2.  github:[https://github.com/vuejs/vue-cli][https_github.com_vuejs_vue-cli]
3.  作用: 从 [https://github.com/vuejs-templates][https_github.com_vuejs-templates] 下载模板项目

二、创建 vue 项目  
1、npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息。  
![在这里插入图片描述][20190509155703676.png]  
2、输入`npm install -g cnpm --registry=http://registry.npm.taobao.org` ，安装淘宝镜像安装相关依赖。  
![在这里插入图片描述][20190509160134113.png]  
3、安装vue-cli脚手架构建工具，输入命令`npm install -g vue-cli`，安装完成即可。  
![在这里插入图片描述][20190509160211972.png]  
4、选定路径，新建vue项目，这里我是新建到桌面上。  
![在这里插入图片描述][20190509155826375.png]  
5、在上一步的目录下新建项目，指令`vue init webpack 项目名称`。  
![在这里插入图片描述][20190509155800433.png]  
6、进入到项目的文件夹下。  
![在这里插入图片描述][20190509155810297.png]  
7、运行项目，指令`npm run dev`。  
![在这里插入图片描述][20190509155818417.png]  
8、在浏览器中打开这个网址。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]  
三、vue项目结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70 1]  
|–build:webpack 相关的配置文件夹(基本不需要修改)  
 |–dev-server.js: 通过 express 启动后台服务器  
|–config:webpack 相关的配置文件夹(基本不需要修改)  
 |–index.js: 指定的后台服务的端口号和静态资源文件夹  
|–node\_modules  
|–src: 源码文件夹  
 |–components:vue 组件及其相关资源文件夹  
 |–App.vue: 应用根主组件  
 |–main.js: 应用入口 js  
|–static: 静态资源文件夹  
|–.babelrc:babel 的配置文件  
|–.eslintignore:eslint 检查忽略的配置  
|–.eslintrc.js:eslint 检查的配置  
|–.gitignore:git 版本管制忽略的配置  
|–index.html: 主页面文件  
|–package.json: 应用包配置文件  
|–README.md: 应用描述说明的 readme 文件  
四、vue项目的打包与发布  
1、打包：`npm run build`  
2、 发布方式1：使用静态服务器工具包  
 `npm install -g serve`  
 `serve dist`  
 访问:[http://localhost:5000][http_localhost_5000]  
3、 发布方式2：使用动态 web 服务器(tomcat)  
 修改配置：webpack.prod.conf.js  
  output:\{  
   publicPath:’/xxx/’ //打包文件夹的名称  
  \}  
 重新打包:  
  `npm run build`  
 修改 dist 文件夹为项目名称：xxx  
 将 xxx 拷贝到运行的 tomcat 的 webapps 目录下  
 访问:[http://localhost:8080/xxx][http_localhost_8080_xxx]

[https_github.com_vuejs_vue-cli]: https://github.com/vuejs/vue-cli
[https_github.com_vuejs-templates]: https://github.com/vuejs-templates
[20190509155703676.png]: /images/20220130/26d6a2541772404b9f2129d8ba7b405f.png
[20190509160134113.png]: /images/20220130/83412623ed03469a864d0910dad87402.png
[20190509160211972.png]: /images/20220130/4e1cea1cfc02438798e141b7ff472d72.png
[20190509155826375.png]: /images/20220130/b10ee059a8ca4d4593002d0222eb0070.png
[20190509155800433.png]: /images/20220130/cdc91e6edc2040dda2fd601cc1dae9b9.png
[20190509155810297.png]: /images/20220130/6ca900edd2a64344916b218e31fb864c.png
[20190509155818417.png]: /images/20220130/851b120bedbf49f19e03a19fad4f72a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]: /images/20220130/2e3246d84152453ca2212a2bee513295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70 1]: /images/20220130/ea020c89d2dc41288cefc83412315338.png
[http_localhost_5000]: http://localhost:5000
[http_localhost_8080_xxx]: http://localhost:8080/xxx