Vue的安装及使用快速入门

逃离我推掉我的手 2022-01-07 18:59 369阅读 0赞

# 一、安装node环境 #

1、下载地址为：`https://nodejs.org/en/`  
　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功  
　　![在这里插入图片描述][20190630095916920.png]  
　　3、为了提高我们的效率，可以使用淘宝的镜像：`http://npm.taobao.org/`  
　　  
　　输入：`npm install -g cnpm –registry=https://registry.npm.taobao.org`，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。  
　　![在这里插入图片描述][20190630095923813.png]  
　　  
　　检查是否安装成功：  
　　![在这里插入图片描述][20190630095936437.png]

# 二、搭建vue项目环境 #

1、全局安装vue-cli

npm install --global vue-cli

![在这里插入图片描述][20190630095950399.png]  
　　2、进入你的项目目录，创建一个基于 webpack 模板的新项目  
　　 　　![在这里插入图片描述][20190630095956443.png]  
　　说明：  
　　　　Vue build ==> 打包方式，回车即可；  
　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；  
　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；  
　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；  
　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；  
　　3、进入项目：cd vue-demo，安装依赖  
　　 ![在这里插入图片描述][20190630100003429.png]  
　　安装成功后，项目文件夹中会多出一个目录：　node\_modules  
　　![在这里插入图片描述][20190630100015284.png]  
　　 　  
　　4、npm run dev，启动项目  
　　项目启动成功：  
　　![在这里插入图片描述][20190630100022577.png]  
　　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70]  
　　5、结束项目运行：  
ctrl+c，选择Y即可停止项目的运行  
Ps：在磁盘目录下按Shift+右键可以直接打开命令框  
**我的命令流程**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 2]

# 三、vue项目目录讲解 #

![在这里插入图片描述][20190630100029525.png]  
　　  
　　1、build：构建脚本目录  
　　　　1）build.js ==> 生产环境构建脚本；  
　　　　2）check-versions.js ==> 检查npm，node.js版本；  
　　　　3）utils.js ==> 构建相关工具方法；  
　　　　4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；  
　　　　5）webpack.base.conf.js ==> webpack基本配置；  
　　　　6）webpack.dev.conf.js ==> webpack开发环境配置；  
　　　　7）webpack.prod.conf.js ==> webpack生产环境配置；  
　　2、config：项目配置  
　　　　1）dev.env.js ==> 开发环境变量；  
　　　　2）index.js ==> 项目配置文件；  
　　　　3）prod.env.js ==> 生产环境变量；  
　　3、node\_modules：npm 加载的项目依赖模块  
　　4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：  
　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；  
　　　　2）components：组件目录，我们写的组件就放在这个目录里面；  
　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；  
　　　　4）App.vue：根组件；  
　　　　5）main.js：入口js文件；  
　　5、static：静态资源目录，如图片、字体等。不会被webpack构建  
　　6、index.html：首页入口文件，可以添加一些 meta 信息等  
　　7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息  
　　8、[README.md][]：项目的说明文档，markdown 格式  
　　9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

# 四、开始我们的第一个vue项目 #

1、在components目录下新建一个views目录，里面写我们的vue组件  
　　　　1）开始我们的第一个组件：  
　　　　a：在views目录下新建First.vue  
　　　　b：在router目录下的index.js里面配置路由路径  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 3]  
　　　　 c：template 写 html，script写 js，style写样式  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 4]  
　　　　d：输入ip： [http://localhost:8010/\#/first，查看页面效果][http_localhost_8010_first]  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 5]  
　　　　注意：  
　　　　一个组件下只能有一个并列的 div，以下写法是错误：  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 6]  
　　　　数据要写在 return 里面，而不是像文档那样子写，以下写法错误：  
　　　　  
![在这里插入图片描述][2019063010012046.png]  
　　2、讲讲父子组件  
　　　　1）在components目录下新建sub文件夹，用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件  
　　　　 ![在这里插入图片描述][20190630100125159.png]  
　　　　3）在父组件中引入子组件  
　　　　引入：import Confirm from ‘…/sub/Confirm’  
　　　　注册：在标签内的 name代码块后面加上 components: \{Confirm\}  
　　　　使用：在内加上  
　　　　完整代码：  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 7]  
　　　　2）父子组件通信  
　　　　子组件：  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 8]  
　　　　父组件：  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 9]  
　　3、使用路由搭建单页应用  
　　　　1）按照以上方法，新建一个Second.vue组件  
　　　　2）路由跳转：去第二个页面  
　　　　  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 10]  
　　　　路由跳转之后，注意观察路径变化：  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 11]  
　　　　可以看到，在html中解析成了a标签  
　　　　 ![在这里插入图片描述][20190630100224313.png]  
　　　　这里只是简单的介绍了一下路由的使用，更多详细信息，请前往官网学习：[https://router.vuejs.org/zh-cn/][https_router.vuejs.org_zh-cn]  
　　4、如何用less写样式  
　　　　1）安装less依赖：npm install less less-loader --save  
　　　　 ![在这里插入图片描述][20190630100232690.png]  
　　　　安装成功之后，可在package.json中看到，多增加了2个模块：  
　　　　 ![在这里插入图片描述][20190630100239189.png]  
　　　　2）编写less  
　　　　 　![在这里插入图片描述][20190630100248126.png]　  
五、补充  
　　1、解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。  
　　解决：  
　　　　1）打开config ==> index.js  
　　　　 ![在这里插入图片描述][20190630100253799.png]  
　　　　2）module.exports配置中找到autoOpenBrowser，默认设置的是false  
　　　　 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 12]  
　　　　3）将autoOpenBrowser改为true  
　　　　 ![在这里插入图片描述][20190630100305713.png]  
　　　　4）Ctrl+C，然后我们重启一下，就能自动打开浏览器了  
　　　　 ![在这里插入图片描述][201906301003156.png]  
　　2、为了避免端口冲突，也可以修改port，打开目录同上  
　　　　 ![在这里插入图片描述][20190630100320400.png]  
　　　　修改成功：  
　　　　  
![在这里插入图片描述][20190630100324344.png]

[20190630095916920.png]: /images/20211220/43f1f8c1f77e4f9185ebd3760be69637.png
[20190630095923813.png]: /images/20211220/b0f966d605424c2e8cf312f6c07193e0.png
[20190630095936437.png]: /images/20211220/3e4c2a8dea4d4279821c862f6a4782a1.png
[20190630095950399.png]: /images/20211220/9bcc99759b0f4a56ad594e0b9364029b.png
[20190630095956443.png]: /images/20211220/17b326809e7c487695c9d746772e2ba9.png
[20190630100003429.png]: /images/20211220/ecb0189261274e7ab8b56abc953ce7ba.png
[20190630100015284.png]: /images/20211220/3ea733b6cbb044088051073c1d0ffc51.png
[20190630100022577.png]: /images/20211220/9d54016e53854abca1fc3fcf0252d947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70]: /images/20211220/84be3b337eb8431d93686872a602abf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190630101734657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 2]: /images/20211220/c1bbefbbb156465e824ca0fa202f32e6.png
[20190630100029525.png]: /images/20211220/df2e070c0275436ab7932585b82b562e.png
[README.md]: http://README.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 3]: /images/20211220/16a10c9a577241bb91a0f266dfe33a02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 4]: /images/20211220/58efbb4355864491bb0b7890ea0d02e0.png
[http_localhost_8010_first]: http://localhost:8010/#/first%EF%BC%8C%E6%9F%A5%E7%9C%8B%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 5]: /images/20211220/c2bd7169fe344dee9a7e909ac5c2fe10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 6]: /images/20211220/debc1b20ac03404b8245fbcbfa0f59ec.png
[2019063010012046.png]: /images/20211220/fcd519dc4e7c49e89dd6a357a6e0adc2.png
[20190630100125159.png]: /images/20211220/ac7aff1ebf024632af7c948d9db874a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 7]: /images/20211220/a6ff1a9b0ef2481b8f91ba5fd0757c57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 8]: /images/20211220/6cf1a65767fd4083b03a0bd89da4e00f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 9]: /images/20211220/c8f3dbd10faf4c7881270fe25d22873b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 10]: /images/20211220/da4a215b678c490da3c8234bb5744395.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 11]: /images/20211220/b3555afea4b541b1af23f1d5771b84dc.png
[20190630100224313.png]: /images/20211220/213da136e2c547958be73d99408b172d.png
[https_router.vuejs.org_zh-cn]: https://router.vuejs.org/zh-cn/
[20190630100232690.png]: /images/20211220/9645056534a14bd5b68c6cfb842ecabc.png
[20190630100239189.png]: /images/20211220/05e0e2b6e9544e4f8b86214ba0e744ee.png
[20190630100248126.png]: /images/20211220/a3767b56be7d47ed8f71f8ec2f0dd54f.png
[20190630100253799.png]: /images/20211220/f10b0dc7ec384fc1b70ee1e824fc6e2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70 12]: /images/20211220/f1c61473de50456d9e08ea06ea4384dd.png
[20190630100305713.png]: /images/20211220/e803b403839e4aabb894f1f17335161b.png
[201906301003156.png]: /images/20211220/cd5b9b8485e34d44975feb72e938bb66.png
[20190630100320400.png]: /images/20211220/e9a4234d24a445368084cf7a2362b118.png
[20190630100324344.png]: /images/20211220/e3dd4bb09d9940a19be9bad78f67f124.png