vue安装

Vue的一系列安装与运行

 

Node.js

    JavaScript，

 

    chrome V8引擎 --> 解释执行JS代码

 

    node.js 就是基于V8引擎 + 和操作系统交互的模块

 

安装

    下载可安装版本，使用下一步安装法安装就可以了。

 

    安装完之后 输入 node -v查看node版本，检查是否安装成功。

 

npm 

    node package manger

 

    包管理工具 包的依赖还有包的版本都记录下来

 

    大版本.小版本.小小版本

     npm初始化一个项目:

    npm init -y

    生成package.json文件,里面记录了项目的详细信息和依赖包的信息

 

 

安装包

    npm install jquery  --save

 

安装指定版本

    npm install bootstrap@3.3.7

 

全局安装(通常安装到全局)

    npm install webpack webpack-cli -g

 

卸载

    npm uninstall jquery

 

默认npm是从国外安装包下载的,通常会比较慢,解决办法是使用 cnpm

 

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

 

 

 

webpack

 

    打包工具

    

    把在后端开发的前端代码（JS、TypeScript、CSS、Less/Sass、png）打包成前端浏览器可以执行的JS代码

 

    为什么要用webpack,因为按照后端模式开发写的JS,浏览器不认识。

 

    用webpack打包代码成 浏览器能认识的代码

 

        ↑

 

    为什么要按照后端开发的方式写JS?

 

    不支持模块化

 

    加载代码是同步的（CDN挂了，后面的代码都运行不了了）

 

        ↑

 

    node.js的出现

 

安装

    注意新版本的webpack需要搭配webpack-cli一起使用

    npm install webpack webpack-cli -g

 

 

 

 

Vue-CLI(快速搭建Vue项目的脚手架)

    安装脚手架工具

    cnpm install -g @vue/cli

    安装完成后,电脑上会多一个vue的命令

 

    检查是否安装成功

    vue --version

 

    使用vue-cli创建vue项目

    vue create 项目名称

 

    VueCLI3创建的vue项目的目录

    代码主要在src目录下

    一个.vue文件就是一个组件对象

    main.js 是入口文件 ,项目运行从main.js开始

    router.js是项目的路由配置,旧版本路由会存在 `router/idnex.js`里面

    App.vue是项目的根组件,渲染从这里开始

 

 

补充:

如何运行其他地方下载下来的Vue项目?

1. cd到项目目录下
2. 执行  npm install 命令,安装项目依赖的模块到 node_models 目录下
3. 启动项目 npm run serve