厦门网站建设,wordpress建网站缺点,成都建设工程安监局网站,西安网页制作培训机构文章目录一、官网下载node.js二、安装Node.js三、环境配置四、idea导入vue项目五、IDEA添加Vue.js插件一、官网下载node.js
Vue是前端开发框架。搭建框架#xff0c;首先要搭建环境。搭建Vue的环境工具#xff1a;node.js#xff08;JavaScript的运行环境#xff09;…
文章目录一、官网下载node.js二、安装Node.js三、环境配置四、idea导入vue项目五、IDEA添加Vue.js插件一、官网下载node.js
Vue是前端开发框架。搭建框架首先要搭建环境。搭建Vue的环境工具node.jsJavaScript的运行环境然后再用nodejs里面的npm包管理和分发工具来安装依赖包。Node.js 是—个基于Chrome V8引擎的JavaScript运行时环境npm是Node.js的包管理工具(package manager)。
下载对应你系统的Node.js版本: https://nodejs.org/en/download/ 其他的版本需下划找到 Previous Releases
再自行找到自己想要的版本下载 二、安装Node.js
1下载完成后双击“node-v16.5.0-x64.msi”开始安装Node.js 2点击【Next】按钮接受协议再点击【Next】按钮 3点击【Next】按钮更换安装目录 4更换后点击【Next】按钮 5点击【Next】按钮 6点击【Next】按钮 7点击【Install】按钮 8最后点击【Finish】按钮 三、环境配置
这里的环境配置主要配置的是npm安装的全局模块所在的路径以及缓存cache的路径之所以要配置是因为以后在执行类似npm install express [-g] 后面的可选参数-gg代表global全局安装的意思的安装语句时会默认将安装的模块安装到 C:\Users\用户名\AppData\Roaming\npm 路径中占C盘空间。 例如我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中则在我安装的文件夹【E:\configurations\Node-v16.5.0】下创建两个文件夹node_global 及 node_cache如下图 创建完两个空文件夹之后打开cmd命令窗口分别输入以下命令按Enter确定
注意以下路径要根据自己nodejs文件夹的位置自行设置
npm config set prefix E:\configurations\Node-v16.5.0\node_global
npm config set cache E:\configurations\Node-v16.5.0\node_cache 接下来设置环境变量“此电脑”-右键-“系统”-“高级系统设置”-“高级”-“环境变量” 进入环境变量对话框在【系统变量】下新建【NODE_PATH】输入【E:\configurations\Node-v16.5.0\node_global\node_modules】 将【用户变量】下的【Path】中默认的C:\Users\用户名\AppData\Roaming\npm修改为【E:\configurations\Node-v16.5.0\node_global】 配置完后安装个module测试下我们就安装最常用的express模块打开cmd窗口 输入如下命令进行模块的全局安装
npm install express -g 注-g是全局安装的意思
若报错
npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path E:\configurations\Node-v16.5.0\node_cache\_cacache
npm ERR! errno EPERM
.....................
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.说明权限不够方法一找到node目录右键属性 安全 设置users用户完全控制权限点击【应用】后再点击【确定】 方法二以管理员身份运行命令提示符 进入 E:\configurations\Node-v16.5.0\node_global\node_modules 后发现安装成功 安装淘宝镜像cnpm 电脑打开cmd, 输入 npm install -g cnpm --registryhttps://registry.npm.taobao.org 安装淘宝镜像
通过npm安装模块时都是去国外的镜像下载的有的时候由于网络原因会导致安装模块失败好在阿里有团队维护国内镜像:http://npm.taobao.org/ 上面有使用说明 输入 npm config get registry 检查是否安装成功 或者进入 E:\configurations\Node-v16.5.0\node_global\node_modules 发现安装成功
除了淘宝镜像也可以用yarn安装地址https://yarnpkg.com/zh-Hans/docs/install
输入 npm install -g vue/cli 安装脚手架 然后分别输入 npm -v 、 node -v 和 vue -V这里大写的V/ vue --version 查看相应的版本号 在电脑上随便位置创建好你需要放Vue项目的文件夹
创建项目文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
然后在cmd上进入该目录使用 vue create xxxx创建vue项目xxxx是你的项目名称名称不可用大写字母
然后进入下面的选择Enter是确认选择上下键是换选择 我选择了第三个Manually select features下一张的*是用空格来取消标记 创建好后执行蓝色提示命令
先入目录 cd test再运行npm run serve 等待运行好后会出现一个地址复制到浏览器打开至此vue项目创建成功 四、idea导入vue项目
打开idea用idea导入我们刚才创建的vue项目 项目导入成功 五、IDEA添加Vue.js插件
点击 左上角的file再点击settings
然后选择plugins在搜索框搜Vue.js进行安装插件
