vue学习 - 配置安装+vue-cli Demo

客官°小女子只卖身不卖艺 2022-03-08 06:18 148阅读 0赞

### 前言 ###

vue是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

github：[https://github.com/vuejs/vue][https_github.com_vuejs_vue]

学习文档：[http://www.runoob.com/vue2/vue-tutorial.html][http_www.runoob.com_vue2_vue-tutorial.html]

编辑工具：https://code.visualstudio.com/Download

### 安装配置 ###

1. 安装node.js (mac推荐安装brwhome,使用brew命令安装)

brew install node

npm -v

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.58.dylib 报错解决：

brew uninstall –force node 
    brew uninstall icu4c && brew install icu4c 
    brew unlink icu4c && brew link icu4c –force 
    brew install node
    
    
    node -v 
    v11.11.0

2.安装vue -cli 脚手架

npm install -g cnpm --registry=https://registry.npm.taobao.org //npm切换成cnpm
    npm install -g vue       //全局安装vue
    npm install -g webpack   //全局安装webpack
    npm install -g vue-cli   //安装脚手架

3.打开终端构建项目vue init vue-test

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1][]

![20190314151906288.png][]

4.运行项目

目录结构

![20190314152356949.png][]

切换到构建的项目里边执行

cd vue-test   
npm i //安装依赖  
npm run dev // 运行

启动成功：访问[http://localhost:8080/][http_localhost_8080]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 2][]

5.打包项目

打开conf目录下的index.js 将"/"修改成"./"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 3][]

执行打包命令npm run build

![20190314154453329.png][]

项目里生成dist文件，这个文件里边是已经编译好的网页和css，js

![20190314155115568.png][]

最后再执行npm run dev

![20190314155021925.png][]

### 搭建demo ###

搭建vue登录demo：[https://www.jianshu.com/p/1210a281b40f][https_www.jianshu.com_p_1210a281b40f]

[https_github.com_vuejs_vue]: https://github.com/vuejs/vue
[http_www.runoob.com_vue2_vue-tutorial.html]: http://www.runoob.com/vue2/vue-tutorial.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20220308/3f6342159e3449adb4376222a48d7e59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1]: /images/20220308/63383aa7a54e42959f37edbd9bce2941.png
[20190314151906288.png]: /images/20220308/da7e7d30d1ef4110bd25a477072cefef.png
[20190314152356949.png]: /images/20220308/c9b618859a0446eb8e5a6b3afd94d5d4.png
[http_localhost_8080]: http://localhost:8080/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 2]: /images/20220308/915e5deb6bc14644ace9b8a4e667586c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 3]: /images/20220308/5709df5f50f747e6879e2175aed2d534.png
[20190314154453329.png]: /images/20220308/e78057f745514fea81e9af6a36624e34.png
[20190314155115568.png]: /images/20220308/f0274efe448f456e8036bb4d6a634071.png
[20190314155021925.png]: /images/20220308/08a7182dee654b9a94ae8585ad3fde0d.png
[https_www.jianshu.com_p_1210a281b40f]: https://www.jianshu.com/p/1210a281b40f