Vue(1) 初识-搭建环境

原创已于 2022-06-01 17:08:26 修改 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-05-16 10:26:58 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何配置NodeJS环境，包括设置安装目录、缓存日志目录和切换到淘宝镜像源。接着，讲解了如何安装Vue.js及其脚手架vue-cli，创建Vue项目并进行测试验证。在创建项目过程中，提到了注意事项，如项目名避免使用中文和大写字母。最后，还介绍了如何升级和安装Vue-cli3.x，以及解决可能出现的版本冲突问题。整个过程适合初学者了解Vue.js的开发环境搭建。

Vue 官网

Vue.js

一、NodeJS下载安装

没有学习过Node.js的同学很有疑问，这个下载的作用是什么？我们在学习vue.js时，不一定要是学过node.js的，我们需要的是NodeJS里npm工具，npm是NodeJS下的一个包管理工具，它可以很方便的帮你管理（可以简单理解为下载）各类前端的框架或插件，类似于PHP的composer，Twitter 的 Bower 一样。使用Vue不需要安装NodeJS，这里下载NodeJS只是为了使用其内置的NPM工具，所以不需要你有任何的NodeJS基础，只需要运行 npm install vue 命令，即可把 Vue 的最新版本下载至 node_modules 文件夹。

我们可以去官网下载下载 | Node.js

附安装教程：http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

如我本地指定的为：

npm config set prefix "/Users/liuchao58/nodejs/node_global"
npm config set cache "/Users/liuchao58/nodejs/node_cache"

npm config get prefix查看npm全局安装包保存路径
npm config get cache查看npm装包缓存路径

还可以输入npm list -global命令来查看全局安装目录、npm config list查看所有npm 配置。

配置淘宝镜像源

查看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的默认配置

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

二、安装vue及脚手架

1.安装vue.js

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

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

查看安装的vue信息：

查看安装的vue版本

npm list vue

安装上vue-router

npm install -g vue-router

安装脚手架vue-cli

npm install vue-cli -g

三、创建vue项目进行测试验证

如：vue init webpack 项目名

vue init webpack hellovue

由于我本地没配置环境变量到系统所以需要到对应的bin文件执行命令

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

进行一些配置：

Project name（工程名）:回车(含大写字母给我报错了，我给改了hellovue)
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回车；

后续自动执行：

此处省略了一部分截图
最后结果如下，项目初始化成功

按提示代码进入到项目目录下并运行

npm run dev

按提示打开地址http://localhost:8080，打开网址如图所示

结束项目运行：ctrl+c，选择Y即可停止项目的运行。

四、选择性安装vue-cli 3.x

1、卸载旧版本
卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

2、安装新版本
npm install @vue/cli –g
指定版本号 npm install -g @vue/cli@3.12.1 不指定版本号会默认安装最新的版本

如图：

3、新建项目

vue create 项目名

vue create test1 报错：

ps:node 需升级到>=8.9

小插曲：

node 升级命令：node升级的正确方法_weixin_34233421的博客-优快云博客

安装方法:

1.产看node版本，没安装的请先安装；

 $  node -v

2.清楚node缓存；

$  sudo npm cache clean -f  

3.安装node版本管理工具'n';

$  sudo npm install n -g

4.使用版本管理工具安装指定node或者升级到最新node版本；

$  sudo n stable  （安装node最新版本）

$  sudo n 8.9.4 （安装node指定版本8.9.4）

5.使用node -v查看node版本，如果版本号改变为你想要的则升级成功。
若版本号未改变则还需配置node环境变量

1.查看通过n安装的node的位置；

$  which node  (如：/usr/local/n/versions/node/6.12.3）

2.cd进入/usr/local/n/versions/node/ 你应该能看到你刚通过n安装的node版本这里如：8.9.4；编辑/etc/profile;

$  vim /etc/profile

3.将node安装的路径（这里为：/usr/local/n/versions/node/8.9.4）添加到文件末尾；

#set node path

export NODE_HOME=/usr/local/n/versions/node/8.9.4

export PATH=$NODE_HOME/bin:$PATH

4.wq退出保存文件，编译/etc/profile;

$  source /etc/profile

5.再次使用node -v查看node版本，不出意外版本号应该变为你想要的。

4、升级后仍可能存在

@vue/cli 的vue-template-compiler与vue版本冲突问题，百度后升级node/配置为相同版本，版本冲突问题解决方式本文略。