【vue入门】vue安装方式

Posted 2023-05-04

参考技术A 安装vue的方式有很多种：

        vue官网地址：    https://v3.cn.vuejs.org/

    后续通过webpack和cli的使用，可以使用这种方式

邹哥教你学Vuejs—入门配置

登录vue官网   https://cn.vuejs.org/

找到安装，可发现vue常用的安装方式分为两种：

（一）、直接使用script标签引入

（二）、使用cli方式

直接引入vue.js文件的方式比较简单，创建一个html页面后，在html页面上通过编写<script>标签引入从vue官网下载的vue.js文件即可使用vue了。下面我们来学习使用cli方式安装vue。

使用cli方式安装vuejs

1.安装node.js

Node.js 安装配置：http://www.runoob.com/nodejs/nodejs-install-setup.html
Node.js 下载地址(官网）：https://nodejs.org/en/download/

根据windows版本后，选择要下载的安装包，下载完毕，按照windows一般应用程序，一路next就可以安装成功，建议不要安装在系统盘（如C：）。

2、设置global和cache路径

设置路径能够把通过npm安装的模块集中在一起，便于管理。
（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹，如安装目录为“D:\nodejs\”
（2）用命令npm config set prefix "D:\nodejs\node_global"和
    npm config set cache "D:\nodejs\node_cache"设置global和cache，
    设置成功后，后续用命令npm install -g XXX安装，模块就在D:\nodejs\node_global\node_modules里。

3、设置环境变量

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。
（1）修改用户变量PATH：把"D:\nodejs\node_global"加到后面。
（2）新增系统变量NODE_PATH：设置成“D:\nodejs\node_global\node_modules”。

4、安装cnpm（或切换淘宝镜像）。基于node.js,利用淘宝npm镜像安装相关依赖

在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...

说明：由于许多npm包都在国外，用淘宝的镜像服务器，对依赖的module进行安装。

参考网址为：http://npm.taobao.org/

安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org

5、用cnpm安装vue

安装命令为：cnpm install vue -g

6、安装vue命令行工具（全局vue-cli脚手架,用于帮助搭建所需的模板框架）

安装命令为：cnpm install -g vue-cli

在cmd里 1)输入：cnpm install vue-cli -g，回车，等待安装...
        2).输入：vue，回车，若出现vue信息说明表示成功

7、创建工程

    命令：vue init webpack 项目文件夹名
    cd命令进入将要新建工程的目录，如“E:\nodejs”
    用命令"vue init webpack ajiashopping(项目文件夹名)"创建一个基于 webpack 模板的新项目，工程名为"mytest"。
    等待一小会儿，依次出现‘git’下的项,依次输入项名名称，项目描述，作者，线程，测试工程等项目信息。
    创建完成后，会提示文档参考地址：https://vuejs-templates.github.io/webpack

8、安装依赖

    在cmd里  1).cd命令进入ajiashopping目录。输入：cd ajiashopping（项目名），回车，进入到具体项目文件夹

            2).安装该工程依赖的模块。输入：cnpm install，回车，等待一小会儿

    回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖），node_module文件夹会被新建，
    而且根据package.json的配置下载该项目的modules。
    这些模块将被安装在：ajiashopping\node_module目录下
    这就是基于脚手架创建的默认项目结构。

9、运行项目，测试环境是否搭建成功

    （1）：用nodejs来启动，在cmd里输入：cnpm run dev。

    （2）：在浏览里输入：localhost:8080(默认端口为8080)。