发布时间:2024-09-21 08:01
本文主要介绍了Vue的安装及环境配置,新建vue项目,简单介绍vue开发工具和项目结构。
文章目录
前言
一、node.js安装和配置
1. 下载安装node.js
2. 配置默认安装目录和缓存日志目录
3. node.js环境配置
4. 配置淘宝镜像源
二、安装vue及脚手架
1.安装vue.js
2.安装webpack模板
3.安装脚手架vue-cli 2.x
4.vue-cli2创建vue项目
三、安装vue-cli 3.x
1、卸载旧版本
2、安装新版本
3、新建项目
4、运行项目
五、cli3下拉取2.x模板
四、开发工具
1、用VS查看vue代码
2、Hbuilder X
五、vue项目结构
六、我的vue 的系统学习笔记
vue笔记一:Vue技术栈
Vue笔记二:基础语法
前言
vue前端框架的环境搭建
一、node.js安装和配置
1. 下载安装node.js
官网下载最新版本:https://nodejs.org/en/download/
可以下载安装包(安装教程见:https://www.runoob.com/nodejs/nodejs-install-setup.html)
或者下载zip文件找个目录保存,解压下载的文件,然后配置环境变量,将解压文件所在的路径配置到环境变量中。
由于Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,在cmd中测试一下是否安装成功了:输入 node -v 与 npm –v分别查看版本信息
2. 配置默认安装目录和缓存日志目录
说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
1、创建默认安装目录和缓存日志目录
比如,我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹【"D:\Program Files \nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。
2、执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
npm config get prefix查看npm全局安装包保存路径
npm config get cache查看npm装包缓存路径
还可以输入npm list -global命令来查看全局安装目录:
3. node.js环境配置
说明:以下D:\Program Files\nodejs为我的node的安装路径,记得改成你们自己的路径
“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框
1、【系统变量】下新建【NODE_PATH】,此处设置第三方依赖包安装目录
如果跟着第2步修改了全局安装目录,则输入【D:\Program Files\nodejs\node_global\node_modules 】
2、【系统变量】下的【Path】添加上node的路径【D:\Program Files\nodejs\】
3、如果设置了全局安装目录,【用户变量】下的【Path】将默认的 C 盘下 APPData/Roaming\npm 修改为【D:\Program Files\nodejs\node_global】,【D:\Program Files\nodejs\node_cache】,这是nodejs默认的模块调用路径
4. 配置淘宝镜像源
查看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信息:npm info vue 或者cnpm info vue
查看安装的vue版本npm list vue
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
回车;
此处省略了一部分截图
最后结果如下,项目初始化成功
2、按提示代码进入到项目目录下并运行npm run dev
按提示打开地址http://localhost:8081, 打开网址如图所示
三、安装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 不指定版本号会默认安装最新的版本
vue create 项目名
- Please pick a preset=》选择一个配置:default默认有babel、eslint,Manually select features 手动配置。
- 选择手动配置,根据自己的需要选择,敲空格键配合方向键进行选择。
- where do you prefer placing config for …=》配置放在哪里
- In dedicated config files =》 每项配置有单独的文件
- In package.json =》在package.json 文件中
- Save this as a preset for future project? =>是否为保存配置习惯文件,存了后下次新建新项目选择配置时就会有此选项了
- Save preset as; =>存个名字
- Pick the package …=>运行选择npm或者yarn
论文解读(GCC)《GCC: Graph Contrastive Coding for Graph Neural Network Pre-Training》
微信小程序配置-------页面配置, 详细配置 全局配置 局部配置
CV进阶 -- 目标检测原理及代码实现、YOLO源码解读学习
linux 为什么编译为模块,Linux驱动模块生成和加载分析
火山引擎支持 Pico 完成业界首场 8K 3D 实时互动 VR 演唱会
如何利用Python写一个病毒,去逗逗室友!毕竟他新买的电脑
一个开发者自述:我是如何设计针对冷热读写场景的 RocketMQ 存储系统