Vue 配置

Vue CLI(Vue脚手架)安装

安装node.js
node.js的作用就是安装Vue CLI的工具,当然它的作用不仅限于此。
安装node.js非常简单,首先我们去node.js官网下载安装包。

安装Vue CLI
安装脚手架的方法很简单,执行下面的命令即可:

npm install -g @vue/cli
// 如果是mac电脑,需要在命令前面加sudo
sudo npm install -g @vue/cli

因为npm下载的插件等都是从国外的服务器中下载,速度会很慢,所以我们要更改镜像(这里我们换成淘宝镜像),这样就可以从国内的服务器下载插件等。执行如下命令即可更改镜像:

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

切换镜像以后,我们再执行安装命令,会发现安装的速度直线上升:

npm install -g @vue/cli

最后还需要验证一下脚手架是否安装成功,可以执行下面的命令:

vue --version

当你看到显示vue的版本的时候,说明已经安装成功。

创建Vue工程

// vue 创建 工程名
vue create vue_first

此时会出现几个选项,这里选择最后一个—自定义配置(键盘上下键选择,回车确认),如下图所示:
在这里插入图片描述
选中以后,进入自定义配置选项,勾选Babel、Router即可(空格选中/反选,回车确认):
在这里插入图片描述
下一步是询问你是否使用历史模式的路由器,可以根据自己需要来选择N或者Y,然后回车确定:
在这里插入图片描述
下一步是询问你要将Babel等配置文件放在哪里,我们选择放在package.json文件里:
在这里插入图片描述
最后一步是询问你是否要保存这次配置,以后如果遇到相同配置的项目会比较方便,你可以根据自己需求来选择:
在这里插入图片描述
然后会经过一系列的编译,最后创建成功一个原始的Vue项目,如下图所示,脚手架还给我们附赠了两个命令,

  • cd vue_first:进入到工程根目录,
  • npm run serve:启动vue工程

此时我们已经成功的创建了一个Vue工程,并启动了这个工程,接下来我们可以去浏览器中打开项目的页面,脚手架给了我们两个地址:

  • http://localhost:8081/
  • http://192.168.0.102:8081/
    第一个是本地的,第二个是联网的,这里我们打开其中任意一个即可。
  • Windows电脑 Ctrl+鼠标左键 点击地址
  • Mac电脑 command+鼠标左键 点击地址
    打开以后,我们会看到一个Vue CLI为我们写的一个初始页面,如下图所示:
    在这里插入图片描述
    附:npm的一些常用命令

npm -v :版本查询

ctrl+c :结束所有dom行命令

npm init – 初始化后会出现一个package.json配置文件;
安装项目依赖

npm install 包名 --save-dev(npm install 包名 -D) :安装的包只用于开发环境,不用于生产环境

npm install 包名 --save (npm install 包名 -S):安装的包需要发布到生产环境的

查看nrm各项命令(nrm -h)

发布了42 篇原创文章 · 获赞 3 · 访问量 576

猜你喜欢

转载自blog.csdn.net/weixin_43117402/article/details/105293124