vue-cli脚手架安装与使用

目录

 

一、node.js环境安装

二、vue-cli2安装

三、vue-cli3安装

---

一、node.js环境安装

      根据电脑选择64位或者32位在Nodejs官网安装下载对应文件到本机。

 下载成功可在命令行查看 nodejs 版本号，若无法查看配置一下环境变量即可

         

 还可查看npm版本号

            

   补充：常见的dos命令

cd	打开文件夹	md	创建新文件夹
dir	查看文件夹内容	cd..	返回上一级文件夹
ctrl + c	命令行终止	cls	清屏

                      

                      

                      

 

npm与cnpm的区别

      npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

      cnpm：因为npm安装插件是从国外服务器下载，受网络影响较大，可能出现异常，所以淘宝团队分享了使用国内镜像来代替国外服务器。

       -g参数  全局安装（global）   

可以通过  npm root -g  查看全局安装的文件夹位置

              

       -S参数（--save）

安装包信息将加入到dependencies(生产阶段的依赖)    

       -D参数（ --save-dev ）

安装包信息将加入到devDependencies(开发阶段的依赖)所以开发阶段一般使用它

       i  是install的缩写（注意：前面没有“-”）

 

二、vue-cli2安装

      手动从淘宝镜像获取资源

           npm install -gd express –registry=http://registry.npm.taobao.org

     为了避免每次安装都需要手动获取registry参数，可以使用如下命令进行永久设置

          npm config set registry http://registry.npm.taobao.org

     下载cnpm

        npm install -gd cnpm –registry=http://registry.npm.taobao.org

        通过 cnpm -v 指令查看下载是否成功

           npm install  -gD  vue-cli

       cnpm install  -gD  vue-cli  (速度较快)

           通过vue  -v指令查看是否安装成功 

      1、创建vue-cli2项目

            vue init webpack projectName

     注意：1、vue-router 官方路由，需要安装

          2、ESLint是个代码风格管理工具，用来统一代码风格，一般项目都会使用

      2、成功启动vue-cli2项目

         在浏览器地址栏上输入 http://localhost:8080 

      3、启动服务：

          npm run dev（vue-cli2启动）

          npm run serve（vue-cli3启动）

    注意：若项目初始化失败则通过 npm install  -gD  vue-cli 重新安装脚手架即可

     4、卸载vue-cli2

          npm uninstall  vue-cli -g          

三、vue-cli3安装

   注意：若不用vuecli的模板，可采用纯手工搭建

     1、 安装依赖：npm install 或者 cnpm install

     2、初始化：npm init  -f  或者  cnpm init -f

     3、安装组件，并查看安装后的内容

       通过指令 cnpm i -D vue-router 安装路由vue-router

       通过指令 type package.json 查看是否安装成功 

      通过指令 cnpm i -D  eslint  安装eslint

      通过指令 type package.json 查看是否安装成功

         安装vue-cli3/升级-2

            npm i -g @vue/cli

          vue图形界面先睹为快

              通过指令 vue ui 启动图形界面

             可以在图形界面创建项目，所见即所得，缺点是创建时间比较长，推荐使用npm创建项目

              运行项目

    以命令行的方式创建项目

      1、创建vue-cli3项目，进入预设界面，选择第二个选项手动设置

          vue create test3

         进入第二个界面，用空格和上下键进行选择Babel  和 Router,然后选择默认

        选择package.json ，而后选择默即可创建成功

     

       2、进入项目并运行

         cd test3 

         npm run serve