Vue安装及使用+cil

最新推荐文章于 2024-04-26 14:47:45 发布

SHIZYYYDS

最新推荐文章于 2024-04-26 14:47:45 发布

阅读量282

点赞数 1

文章标签： vue.js javascript ecmascript

原文链接：https://blog.csdn.net/dream_summer/article/details/108867317?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164626882416780271557912%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164626882416780271557912&biz_id=0&utm_m

版权

一、首先我们先搞一个node，若安装直接node -v查看版本

官网下载最新版本：Download | Node.js

由于Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用 npm命令，在cmd中测试一下是否安装成功了：输入 node -v 与 npm –v分别查看版本信息

接下来需要去电脑上搞一下环境配置

3. node.js环境配置

说明：以下D:\Program Files\nodejs为我的node的安装路径，记得改成你们自己的路径

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，进入环境变量对话框

1、【系统变量】下新建【NODE_PATH】，输入
【D:\Program Files\nodejs\node_global\node_modules 】
在这里插入图片描述

在这里插入图片描述
2、【系统变量】下的【Path】添加上node的路径【D:\Program Files\nodejs\】

3、【用户变量】下的【Path】添加上
【D:\Program Files\nodejs\node_global】，【D:\Program Files\nodejs\node_cache】，这是nodejs默认的模块调用路径

在这里插入图片描述

二、配一个淘宝镜像吧，真的好用当然也可以cnpm-v看一下电脑上有没有

查看npm下载源 npm config get registry

将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，现在用的都是淘宝镜像源（https://registry.npm.taobao.org），使用淘宝镜像源有两种方式：

（1）临时使用

npm --registry https://registry.npm.taobao.org install cluster

这个代码就是只在安装cluster的使用淘宝镜像下载，每次安装一个模块都用挺长的代码，比较繁琐，所以推荐第二种方式。

（2）永久使用

这里有也两种配置选择，一是直接修改npm命令的仓库地址为淘宝镜像源，另一种是安装cnpm命令。

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

验证：配置后可以根据 npm config get registry或 npm config list 命令查看npm下载源是否配置成功，如图所示配置前为"https://registry.npmjs.org/"

在这里插入图片描述

配置后为淘宝镜像，表示配置成功

在这里插入图片描述

第二种：安装cnpm

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

验证方式变成了cnpm config get registry 或 cnpm config list如图所示

在这里插入图片描述

ok就搞完了我们去搞一个脚手架玩一玩

二、安装vue及脚手架

1.安装vue.js

npm install vue -g或者cnpm install vue -g

根据自己的淘宝镜像源设置选择命令，其中-g是全局安装，指安装到global全局目录去

在这里插入图片描述

查看安装的vue信息：npm info vue 或者cnpm info vue

在这里插入图片描述

查看安装的vue版本npm list vue

在这里插入图片描述

2.安装webpack模板

在命令行中运行命令 npm install webpack -g ，然后等待安装完成。

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：npm install --global webpack-cli，
安装成功后可使用webpack -v查看版本号。

3.安装脚手架vue-cli 2.x

npm install vue-cli -g

用这个命令来检查其版本是否正确：vue --version或vue -V

在这里插入图片描述

这里顺手安装上vue-router

npm install -g vue-router

4.vue-cli2创建vue项目

1、创建项目（最好在cd到D盘的某个位置，即项目的路径，否则项目会新建在C:\Users\Administrator\，也可以直接在想要的项目路径下输入cmd）

vue init webpack 项目名

项目名不要取中文和大写字母。

进行一些配置：

Project name（工程名）:回车(含大写字母给我报错了，我给改了my-vue)
Project description（工程介绍）：回车
Author：作者名：回车
Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install

在这里插入图片描述