Vue.js学习心得

目录

一、Vue.js是什么

二、Vue.js的特点和优势

三、Vue.js项目化

1.下载安装node

2、下载安装VScode代码编辑工具

3、vue2项目调试插件

四、使用Vue Cli快速构建项目

1.、vue cli 脚手架的安装

1.查看当前已安装包

2.卸载脚手架

3.安装脚手架

2、创建项目

3、启动服务

---

一、Vue.js是什么

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

二、Vue.js的特点和优势

1、vue两大特点：响应式编程、组件化。

2、vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

3、vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

三、Vue.js项目化

1.下载安装node

node官网链接https://nodejs.cn/download/点击上面链接下载好node后进行一步步的安装，然后在系统高级设置中配置环境变量：

进入环境变量后翻看系统变量里找到Path

双击Path，点击新建后把node的路径复制粘贴进去。

保存好后使用win+R调出控制台（输入cmd）然后输入node-v指令查看是否安装成功：

返回版本号则表示安装成功。

2、下载安装VScode代码编辑工具

可以去VScode官网自行选择下载

VScode官网https://code.visualstudio.com/

3、vue2项目调试插件

下载 vue.js_devtools

可以参考下面文章亲测好用

vue.js_devtoolshttps://blog.csdn.net/weixin_41092938/article/details/1124779664.npm

  npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

使用win+R调出控制台（输入cmd）然后输入npm -v指令查看npm版本

npm使用场景需求：

        1、从npm服务器下载别人编写的第三方包到本地使用。

        2、从npm服务器下载并安装别人编写的命令程序到本地使用。

        3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

npm常用命令行：

           npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

           cmd命令行输入指令安装淘宝镜像:

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

四、使用Vue Cli快速构建项目

1.、vue cli 脚手架的安装

1.查看当前已安装包

npm list -g --depth 0

2.卸载脚手架

npm uninstall -g @vue/cli  //卸载3.x版本脚手架
npm uninstall -g vue-cli  //卸载2.x版本脚手架

3.安装脚手架

npm install @vue/cli -g		//vue3.x版本
npm install vue-cli -g		//vue2.x版本

PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

         //安装淘宝镜像的命令行

①  npm install -g cnpm --registry=https://registry.npmmirror.com

 // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

 ②  cnpm install -g @vue/cli

成功安装界面

使用win+R调出控制台（输入cmd）然后输入vue -V指令查看vue版本 ，出现版本号即安装成功

2、创建项目

提示符窗口中进入Vue Workspace（自行指定的用于存放项目的文件夹）

# 切换到D盘
d:
# 创建Vue文件夹名称为work1，是自定义名称
mkdir work1
# 进入D盘下的work1
cd work1

使用 vue create 命令即可创建vue cli项目，命令格式是：

vue create 项目名称

执行 vue create 命令之后，可看到如下所示界面

创建过程中会有一些选项，最先提示的选项是 Please pick a preset ，表示“请选择一个预设项”，推荐选择 Manually select features ，表示“手动选择”，通过键盘的上下箭头进行选择，选择到目标项后按下键盘的 Enter 键到下一步

接下来的选项是 Check the features needed for your project ，表示“选择你的项目中需要使用的功能”，推荐在列表中选择 Babel 、 Router 、 Vuex 这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的 Enter 键到下一步

接下来的选项是 Choose a version of Vue.js that you want to start the project with ，表示“选择你的项目中希望使用的Vue.js的版本”，推荐选择 2.x 这项，选择到目标项后按下键盘的 Enter键到下一步

接下来的选项是 Use history mode for router ，表示“是否在路由中选择历史模式”，推荐选择“是”，输入 Y 后按下键盘的 Enter 键到下一步（提示信息中， Y 是大写的，表示它是默认选项，不输入Y 而直接按下 Enter 键是等效的）

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ，表示“你习惯把一些配置信息存放在哪里？”，推荐选择In package.json，即存放在 package.json 文件中，选择到目标项后按下键盘的 Enter 键到下一步

最后的选项是 Save this as a preset for future projects? ，表示“是否保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择“否”，输入 N 后按下键盘的 Enter 键（提示信息中， N 是大写的，表示它是默认选项，不输入N而直接按下 Enter 键是等效的）

到此项目创建成功

3、启动服务

在创建项目的文件夹中调用控制台，输入npm run serve命令启动服务

npm run serve

项目启动成功后在添加了vue扩展的浏览器内打开Local：或Network：后的网址浏览器中进行访问

到此使用Vue Cli快速构建项目完成。