如何用Vue创建或者打开一个已有的项目
文章目录1. 安装node.js1.1 从官网下载node1.2 配置环境变量1.3 检查是否安装成功以及版本信息2. 安装cnpm2.1 下载cnmp2.2 检查cnmp 是否安装成功3. 安装vue-cli脚手架构建工具3.1 下载vue-cil3.2 检查vue是否安装成功4. 用vue-cli构建项目5. 安装项目所需的依赖6. 运行项目1. 安装node.js1.1 从官网下载noden
文章目录
本篇文章介绍了如何用Vue创建或者打开一个已有的项目。
其中目录中的1-3是必须完成的步骤。在此基础上,如果需要创建新的项目,需要完成步骤4;如果需要打开现有的项目,需要完成步骤5。
1. 安装node.js
1.1 从官网下载node
node官网下载地址
选择合适的版本(无特殊要求,我选择的是左边的稳定版),一路“下一步”即可完成安装(可以选择安装路径,但要注意记录下安装的路径,后续配置环境变量时需要,此处我的默认路径是“C:\Program Files\nodejs”)。
2022年2月更:如果还想要14.17.5版的,去下面这个链接
https://nodejs.org/download/release/v14.17.5/
选择后缀为msi的安装程序下载
1.2 配置环境变量
-
用户变量
在用户变量窗口点击“新建”,然后在弹窗中输入下列信息,点击“确定”即可。
变量名:NODE_PATH
变量值:C:\Program Files\nodejs\node_modules\
-
系统变量
在系统变量中找到Path并点击, 然后在弹窗中点击“新建”, 并分别键入
C:\Program Files\nodejs\
C:\Program Files\nodejs\node_global\
最后点击“确定”即可
1.3 检查是否安装成功以及版本信息
- 在命令行键入
node -v
- 在命令行键入
npm -v
出现上述两个版本信息说明node环境已经安装完成,npm包管理器也有了。
2. 安装cnpm
由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。
2.1 下载cnmp
安装cnmp 我们是需要在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org
即可。
2.2 检查cnmp 是否安装成功
在命令行中输入cnpm -v
完成之后,我们就可以用cnpm代替npm来安装依赖包了。
3. 安装vue-cli脚手架构建工具
3.1 下载vue-cil
在命令行中运行命令 cnpm install -g vue-cli
,然后等待安装完成(在此处也可以使用npm命令,但是速度会比较慢)。
3.2 检查vue是否安装成功
在命令行中键入vue list
4. 创建新的vue项目
4.1 用vue-cli构建项目
通过以上三个步骤,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
- 命令行中把目录转到选定的目录(目录无特殊要求)。
- 在命令行中运行命令
vue init webpack firstVue
(这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中) - 运行初始化命令的时候会让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。
( 说明:
Vue build ==> 打包方式,回车即可;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;)
4.2 安装项目所需的依赖
要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install
,等待安装。
安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。
4.3 运行项目
在项目目录中,运行命令 npm run dev
运行成功后会出现以下弹窗
然后在浏览器中打开http://localhost:8080
, 就会出现如下网页
5. 运行开源项目
比如说现在我们从GitHub上download一个vue.js的开源项目,下面记录如何在浏览器运行该项目的方法。
5.1 安装webpack
cmd 命令行中见键入npm install webpack -g
即可完成安装
5.2 运行项目
- 在命令行中cd当项目所在的路径下。
- 安装依赖, 键入
npm install
安装完成后,项目中会多出“node_modules”文件夹
- 安装node-sass ,键入
npm i -D sass-loader@8.x
- 安装style-loader, 键入
npm install style-loader --save-dev
- 安装sass-loader , 键入
npm install node-sass@4.14.1
注意:这里要安装4.14.1 版本,因为要和之前安装的Node Sass version 6.0.1 匹配 - 运行项目,键入
npm run dev
- 出现下图说明运行成功,浏览器会自动打开网页。(如果不能打开,可以手动输入Local 或者NetWork中提供的网址)
6. 踩坑记录
直接用命令npm install node-sass@4.14.1
安装sass-loader的时候出现如下报错,一开始以为是没装上,装了很多次还是报这个错。后来发现是这里的sass-loader的版本要和要和之前安装的Node Sass的匹配匹配,然后按照指定sass-load版本的命令安装。
github上下载sass-loader的各个版本
github上下载node-sass的各个版本
官网上的版本对应信息
查看自己的node版本 node -v
卸载当前的版本npm uninstall node-sass
安装新版本node-sassnpm install node-sass@4.14.1
(结合上表选择自己需要安装的版本)
更多推荐
所有评论(0)