【小白的进阶史之vue---1】idea新建vue项目
【小白的进阶史之vue---1】idea新建vue项目vue环境搭建vue-cli脚手架安装idea项目集成vuevue环境搭建从node官网下载node.js,小白式安装(直接点下一步即可),windows+R,输入node -v检验是否成功安装node。npm包管理器,安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。vue-cli脚手架安装在命令...
vue环境搭建
- 从node官网下载node.js,小白式安装(直接点下一步即可),windows+R,输入node -v检验是否成功安装node。
- npm包管理器,安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。
vue-cli脚手架安装
在命令行中输入(我已经安装过了,就不演示结果了)
npm install vue-cli -g
idea项目集成vue
首先在idea项目中
-
找到Terminal
-
输入vue init webpack [项目名称]
-
依次输入对应的行项目,具体详解如下
Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
Project description:项目描述,直接回车
Author :作者
vue build : 选择vue的构建模式两个选择(上下箭头选择,回车即为选定)
1.Runtime + Compiler:recommended for most users
(译:运行+编译:被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项,适合大多数用户的install vue-router是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
Use ESLint to lint your code是否使用ESLint检测你的代码?(建议N)
(ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
Pick an ESLint preset:选择分支风格选项有三个
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
Setup unit tests? 是否安装单元测试(暂不详细介绍)Pick a test runner 选择一个单元测试运行器
选项有三个
1.Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
2.Karma and Mocha
3.none**Setup e2e tests with Nightwatch(Y/n)**是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
Should we run ‘npm install’ for you after the project has been created(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)一路回车到此等待安装完毕,会提示接下来的命令行
紧接着就是切换到vue目录下
cd [此处填写你的vue目录,我的是Family-Vue]
跳出访问地址,点击进入,出现如下画面,恭喜你项目整合成功!
更多推荐
所有评论(0)