一、安装和配置node.js
1.1 下载安装node.js
Nodejs的官方网站下载地址:https://nodejs.org/en/download/
Node.js会同步安装npm,安装完成后,启动cmd测试下是否安装成功。
输入命令行:node -v 和 npm -v分别查看版本
1.2配置npm默认安装路径和缓存路径
(1)创建文件夹
在执行npm install 全局安装命令时,会默认安装到【C:\Users\用户名\AppData\Roaming\npm】中,可以改变默认安装路径,比如改变到node.js的安装目录下。在【C:\Program Files\nodejs】下创建NodeGlobal和NodeCache两个文件夹,分别存放安装文件和安装缓存文件。
- 执行配置命令
启动cmd,执行以下两条命令:
npm config set prefix "C:\Program Files\nodejs\NodeGlobal"
npm config set cache "C:\Program Files\nodejs\NodeCache"
npm config get prefix 查看默认安装路径;
npm config get cache 查看默认缓存路径。
1.3环境变量配置
鼠标指向“我的电脑”,右键,“属性”-“高级系统设置”-“高级”-“环境变量”。
- 在“系统变量”,找到“Path”后“编辑”-新建,输入node的安装路径【C:\Program Files\nodejs\】
- 在在“系统变量”,新建NODE_PATH,输入【C:\Program Files\nodejs\NodeGlobal\node_modules】
- 在用户变量下的Path里分别添加【C:\Program Files\nodejs\NodeGlobal】,【C:\Program Files\nodejs\NodeCache】
1.4 配置npm默认的下载源
npm在执行安装命令时,会从源网站下载模块,默认是https://registry.npmjs.org/,改成国内淘宝镜像源,下载速度更快。
启动cmd,执行命令:npm config set registry https://registry.npm.taobao.org
执行命令npm config get registry 查看是否配置成功
二、安装和配置VUE
2.1 安装vue.js
执行命令npm install vue -g
-g是全局安装命令,将安装到步骤1.2配置的安装路径【C:\Program Files\nodejs\NodeGlobal】
执行命令npm list vue 查看是否安装成功
2.2 安装webpack
在cmd中执行webpack安装命令:npm install webpack -g;
在cmd中执行webpack-cli安装命令:npm install --global webpack-cli;
在cmd中执行查看webpack版本命令:webpack -v。
2.3 安装vue-cli
在cmd中执行vue-cli安装命令:npm install vue-cli -g
在cmd中执行router安装命令:npm install -g vue-router
在cmd中执行查看版本命令:vue -v
2.4 配置环境变量
在“系统变量”,找到“Path”后“编辑”-新建,输入vue.cmd的安装路径【C:\Program Files\nodejs\NodeGlobal\】(执行vue命令创建项目时如果提示不是有效命令,即是因为vue.cmd路径没配置到环境变量中)
三、创建vue工程项目
3.1 创建工程
(1)创建工程的存放路径,比如E:\Projects\Vue,启动cmd,执行cd命令进入路径【E:\Projects\Vue】(如果不指定路径,会默认创建到【C:\Users\Administrator\】下)
(2)执行命令:vue init webpack myproject,【myproject】是你的工程名称,不能使用中文和大写字母。
执行成功后会出来配置选项:
Project name: 回车确认
Project description:项目介绍,可不填写,回车确认
Author:输入作者姓名后回车
Vue build:询问编译打包的方式,有runtime-compiler、 runtime-only两种选择,上下键选择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:询问是否需要端到端测试工具Nightwatch,输入n后回车;
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys):询问 安装依赖npm install,直接回车确认。
之后开始执行安装依赖包,最后会提示:Project initialization finished!
3.2 启动运行vue工程示例
cmd 在工程路径下,执行命令:npm run dev
按照提示打开网页输入【http://localhost:8080】,显示网页如下则创建成功:
要结束vue工程运行可输入Ctrl+C,选择y
四、VUE工程目录
打开刚才创建的工程【E:\Projects\Vue\myproject】目录,会发现初始了一堆文件夹和文件,掌握这些目录和文件的用途对项目开发也很有必要:
4.1 build(webpack开发和打包配置目录)
1)build.js :构建环境配置;
2)check-versions.js :npm和node.js的版本检查;
3)utils.js :配置静态资源路径;
4)vue-loader.conf.js :CSS加载器配置;
5)webpack.base.conf.js :webpack编译入口、输出路径等基本配置;
6)webpack.dev.conf.js : webpack开发环境配置文件;
7)webpack.prod.conf.js :webpack生产环境配置文件;
4.2 config(项目配置目录)
1)dev.env.js :开发环境变量文件;
2)index.js :项目配置文件;
3)prod.env.js :生产环境变量文件;
4.3 node_modules(npm 加载的项目依赖模块)
4.4 src (项目源文件目录)
1)assets:资源目录,放置公用的js、css或者ogo图片;
2)components:自定义组件的存放目录;
3)router:前端路由目录,需要配置的路由路径写在index.js里面;
4)App.vue:Vue 应用的根节点组件;
5)main.js:应用的入口文件,文件中引入vue框架,创建vue实例并挂载index.html的HTML素。
4.5、static (图片、字体等静态资源目录)
4.6、test(初始测试目录,可删除)
4.7、根目录
1)index.html:首页入口文件,VUE应用通过index.html加载运行
2)package.json:npm脚本、依赖包等配置信息
3)README.md:项目说明文档,markdown 格式
4).babelrc:babel:编译参数
5).editorconfig::编辑器配置,代码格式
6).eslintignore : 配置需要忽略的路径,一般build、config、dist、test等目录都会配置忽略
7).eslintrc.js : 配置代码格式风格检查规则
8).gitignore:git上传需要忽略的文件配置
9).postcssrc.js :css转换工具
10)package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
11)README.md:项目的说明文档,markdown 格式
五、IntelliJ IDEA开发工具安装和配置
IntelliJ IDEA,是JetBrains公司提供的JAVA开发集成环境,业界公认最优秀的JAVA开发工具之一。安装IDEA之前,需要先安装JDK环境。
5.1 JDK安装
JDK官网下载地址:
https://www.oracle.com/java/technologies/downloads/#java8
完成JDK后需配置相应环境变量,可自行百度。
5.2 IntelliJ IDEA安装
IntelliJ IDEA官网下载地址:
https://www.jetbrains.com/zh-cn/idea/download/
UItimate 付费版,主要针对 Web 和企业开发用户,需要有注册码;Community 免费社区版,主要针对Java 初学者。
安装成功后,进入IDEA,help下的Register,输入注册码进行激活。
5.3 安装VUE和node插件
打开IntelliJ IDEA,File-Setting-Plugins,搜索VUE,安装;搜索node,安装。
六、使用IntelliJ IDEA创建VUE工程
6.1 创建工程
打开IntelliJ IDEA,File-New-Project from Existing Sources,选择步骤3.1创建的VUE工程目录,【E:\Projects\Vue\myproject】,“OK”;
导入工程,点Next:
一直点Next即可,出现no framework detected时,点finish,成功。
6.2 配置运行环境
VUE需要用npm来运行,在IntelliJ IDEA右上角Edit Configurations,Add new run confiurations,出现如下界面:
选择npm,在Scripts中输入dev后“OK”;
之后右上角绿色三角符号,打开网页输入【http://localhost:8080】,VUE项目运行成功,可以继续通过IntelliJ IDEA写代码调试了。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://sigusoft.com/idea/686.html