vue网站案例（从头搭建VUE环境）

一、安装和配置node.js1.1 下载安装node.jsNodejs的官方网站下载地址：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 查看是否配置成功二、安装和配置VUE2.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 -v2.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写代码调试了。