vue脚手架搭建流程

绝地灬酷狼 2022-06-02 07:07 366阅读 0赞

> 搭建vue项目之前你需要安装vue的脚手架和node.js，一起去看看怎么搭建一个vue环境吧。（学编程语言最爱看见的就是用这个先写一个helloworld，只想说我对世界友好可是现实是残酷的。。。。。。）

> **1& 安装node.js **（安装网址点击下面链接）

> [node.js下载网址][node.js]

> 安装完以后桌面上什么都没有是不是有点慌啊！不急，你先打开Dos窗口，输入以下命令，
> 
> 如果界面如下：（恭喜你）

> ![SouthEast][]

> 也有可能失败，失败的原因可能是系统权限，目前还没有找到最好的解决办法。。。。。

> Node.js是个啥人家首页都写着呢，俺就不给你解释了哈。

> **2&安装vue的脚手架**

> 全局安装vue-cil，也就是所谓的脚手架（不要觉得有什么高大尚的也就是如此而已）

> 1）用npm安装（国际开源库生态系统）

> ![SouthEast 1][]

> 2）用cnpm安装（使用国内镜像安装）

> 你先用淘宝镜像安装cnpm才可以使用哦

> 1.npm install -g cnpm --registry=https://registry.npm.taobao.org
> 
> ![SouthEast 2][]

> 检查是否安装上（cnpm -v）

> ![SouthEast 3][]

> 2. 用cnpm安装vue脚手架

> cnpm install -g vue-cli

> 最后检查自己是否安装上：（vue -V）记住这里的-V是大写字母V，出不来可不要懒我，我可不会管你

> 特别注意：

> 1.如果提示“无法识别”，有可能是npm的版本过低。

> 解决办法：npm install -g npm（更新一下版本就好了）。

> 2. 如果安装失败的话。

> 解决办法：npm cache clean（清除一下缓存就好了）
> 
>

> **3&生成项目**

> 首先需要用cd指令进入项目目录进行搭建项目的文件夹

> ![SouthEast 4][]
> 
>  
> 
> ![SouthEast 5][]

> 配置完成以后，可以看到目录下多出一个项目文件夹，里面就是vue-cli创建的一个局域webpack的vue.js项目。

> 然后进入项目目录下：cd mai

> 上面脚手架给我们把常用的插件都下载并且配置起来，比方说路由、以及es6转成es5的插件。

> 在做项目的过程我们常常用到数据的传输和各个组件的管理，所以接下来我们还需要安装一些插件：
> 
>

> 安装vue-resource是用于ajax请求的vue插件 用来和服务器端进行数据通信

> **npm install vue-resource --save**

> 安装vuex是用于管理每个组件之间的状态值的改变

> **npm install vuex --save**

> **[点击打开链接][node.js]（vuex的介绍和使用）**

> 记住以上两个必须安装在项目里哦，忘记了小姐姐可不会负责哦（没事，错了就重新来一遍呗）。

> npm install（这样就完成了）

> 最后就是启动项目了（就问一句激不激动小伙伴们）

> npm run dev

> ![SouthEast 6][]

> 出现这个页面就算是大功告成了（在浏览器上输入localhost：8080就可以打开如下界面）
> 
> ![SouthEast 7][]

> （可以开始写项目了。。。。。。）

> 特别注意：

> 如果浏览页面打不开或者是没有加载页面，有可能是本地8080端口被占用，又或者是你关闭了这个窗口。

> 解决办法：

> 针对第一种情况：修改配置文件就好了

> 打开项目找到config>index.js

> ![SouthEast 8][]

> 建议将端口号改为不常用的端口（例如：8075 8081等等端口，一般情况默认的端口号是8080）。

> 对于第二种情况：重启一下JavaScript的运行环境就好了，至于怎么启动我就不说了。

> **4&打包上线**

> 自己的项目文件都需要放到 src 文件夹下

> 项目开发完成之后，可以输入 npm run build 来进行打包工作

> 打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看，项目上线时，只需要将 dist 文件夹放到服务器就行了。
> 
> 导入文件以后，其文件组织结构如下所示：
> 
> ![SouthEast 9][]
> 
> 各个文件夹的含义如下：
> 
>  
> 
> |-- build            // 项目构建(webpack)相关代码
> 
> |   |-- build.js         // 生产环境构建代码
> 
> |   |-- check-version.js      // 检查node、npm等版本
> 
> |   |-- dev-client.js        // 热重载相关
> 
> |   |-- dev-server.js         // 构建本地服务器
> 
> |   |-- utils.js             // 构建工具相关
> 
> |   |-- webpack.base.conf.js     // webpack基础配置
> 
> |   |-- webpack.dev.conf.js      // webpack开发环境配置
> 
> |   |-- webpack.prod.conf.js     // webpack生产环境配置
> 
> |-- config           // 项目开发环境配置
> 
> |   |-- dev.env.js    // 开发环境变量
> 
> |   |-- index.js     // 项目一些配置变量
> 
> |   |-- prod.env.js   // 生产环境变量
> 
> |   |-- test.env.js   // 测试环境变量
> 
> |-- src           // 源码目录
> 
> |   |-- components    // vue公共组件
> 
> |   |-- store        // vuex的状态管理
> 
> |   |-- App.vue       // 页面入口文件
> 
> |   |-- main.js       // 程序入口文件，加载各种公共组件
> 
> |-- static            // 静态文件，比如一些图片，json数据等
> 
> |   |-- data        // 群聊分析得到的数据用于数据可视化
> 
> |-- .babelrc           // ES6语法编译配置
> 
> |-- .editorconfig      // 定义代码格式
> 
> |-- .gitignore        // git上传需要忽略的文件格式
> 
> |-- README.md       // 项目说明
> 
> |-- favicon.ico
> 
> |-- index.html      // 入口页面
> 
> |-- package.json    // 项目基本信息
> 
>  
> 
>

> 最后来一个撩人小技能（得跟有好感的男盆友玩才有意思）：

> 女：我们两个有几条腿？

> 男：4条腿

> 女：不对不对

> 男：？？

> 女：一条腿，他们都说我们有一腿

> （如果你的男盆友不安套路出牌的话我也没有办法了）

[node.js]: https://vuex.vuejs.org/zh-cn/intro.html
[SouthEast]: /images/20220602/71295a3389804d4288b7e3e62e672de1.png
[SouthEast 1]: /images/20220602/645cad36a5da401c98114f8017da08b4.png
[SouthEast 2]: /images/20220602/b543f7f3cc1d4a48967586cdaad0d271.png
[SouthEast 3]: /images/20220602/6cbd34dc337346d4a83b24365277832e.png
[SouthEast 4]: /images/20220602/9e3189d41fb742f681d3653dfb95ed6c.png
[SouthEast 5]: /images/20220602/31aceed9ed694db7ab1140904d406fb5.png
[SouthEast 6]: /images/20220602/bdd7382a06b345a2b5bcb74f11eb2aa0.png
[SouthEast 7]: /images/20220602/14bc64a3f62a4d2d8e0e8ea219900837.png
[SouthEast 8]: /images/20220602/bec5a3ddd8fe49a19331a86fed4c9dae.png
[SouthEast 9]: /images/20220602/05e7784ccdee417a8a4cc561e0fcdf2d.png