vue.js环境安装
1、到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所有就不需要额外下载npm了)
2、如果是新手,那么建议以引入文件的方式使用vue.js。可以在桌面上新建一个文件夹test,打卡文件夹之后,按住shift再鼠标右击,打开powershell,输入npm install vue即可
2、安装好了之后再安装vue-cli(脚手架工具),输入命令:npm install -g vue-cli
3、安装好了之后再输入vue list,来查看当前可使用的模板
4、使用vue init webpack sell来安装项目模板(sell表示你所创建的模板的名字,同项目名即可)
5、安装好后会有两个提示cd sell和npm run dev
cd sell 表示进入刚刚创建的目录。
npm run dev 表示启动项目:
可以将http://localhost:8080这个url输入到浏览器中进行查看。
下面这就是刚刚创建好的项目:
在一级目录中:
build文件夹:webpack的文件相关。
node_modules文件夹:通过npm install 安装的依赖代码库。
src文件夹:项目存放的代码。
static文件夹:存放第三方静态资源。(一般会有一个.gitkeep文件:当该目录为空时,也可以把这个目录提交到github的代码仓库中去)。
.babelrc文件:存放babel的一些配置(babel:将ES6的语法编译成ES5)。
{"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["transform-vue-jsx", "transform-runtime"],"env": {"test": {"presets": ["env", "stage-2"]}} }presets属性:预设. browsers中,>1%:表示市场份额大于1%。last 2 versions:表示支持每个浏览器最后两个版本。not ie <= 8:支持IE9及以上的浏览器。 plugins:表示babel中要用到的插件。transform-runtime:node_modules文件夹内,插件的名字
{"presets": [// babel-preset-env插件,相当于 es2015 ,es2016 ,es2017 及最新版本。以后只需这一个preset就够了["env", { "modules": false, // 默认为 "commonjs",为false的话则是es6模块语法"targets": {"browsers": ["> 1%", "last 2 versions", "android 2.3"] // browserslist },"useBuiltIns": true // 如果为 true 且引入了polyfill (import "babel-polyfill")的话,插件 会根据 targets 的配置,重写 import "babel-polyfill" ,只引入对应环境必须的 "babel-polyfill" 的子模块,减少了多余的代码引入 }]],"plugins": [// babel-plugin-transform-runtime 插件,无全局污染地使用新API,但是不能使用实例方法,建议在开发供他人使用的库时使用。一般业务情况下使用 babel-polyfill 感觉也没啥问题,那点污染对开发几乎无影响"transform-runtime", { // 以下都是默认配置"helpers": true, // 将内联的语法转换代码替换为引用对应模块,减少重复代码"polyfill": true, // 使用非全局污染的 polyfill"regenerator": true, // 使用不污染全局作用域的 regenerator 运行时"moduleName": "babel-runtime" // 设置使用helper模块时的路径 }] }
babel的详细解释
更多有关webpack构建工具的信息:https://www.cnblogs.com/tugenhua0707/p/9452471.html
editorconfig文件。
root = true[*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true对编译器的一些配置
eslintignore文件。
/build/ /config/ /dist/ /*.js /test/unit/coverage/在build、config、dist等文件夹内的文件,不会使用eslint对其进行js语法检查
eslintrc文件:eslint的配置文件。
// https://eslint.org/docs/user-guide/configuring module.exports = {root: true,parserOptions: {parser: 'babel-eslint'},env: {browser: true,},extends: [// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential', // https://github.com/standard/standard/blob/master/docs/RULES-en.md'standard'],// required to lint *.vue files plugins: ['vue'],// add your custom rules here rules: {// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'//不允许在代码中使用debugger } }
gitignore文件:让git忽略掉这些文件和目录。
.DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* /test/unit/coverage/# Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln
index.html:项目的入口文件。
package.json文件:项目的配置文件。
postcssrc.js文件:样式转换器,可以根据不同的浏览器生成不同的样式。
package-lock.json:锁定安装时的包的版本号。
vue.js 学习:https://vuefe.cn/v2/guide/#起步
转载于:https://www.cnblogs.com/vichin/p/7364128.html
vue.js环境安装相关推荐
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 关于node.js 和vue.js的安装、卸载、浏览器测试问题?
关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...
- Ubuntu(WSL)中Node.js环境安装
Node.js环境安装 1 NVM安装 1.1 NVM的Github安装方法 1.2 NVM的Gitee(码云)安装 1.2.1 NVM源代码下载 1.2.2 nvm安装 1.3 NVM国内源设置 1 ...
- Vue.js-Day03-AM【超级详细:Node.js环境安装、安装淘宝镜像(Win、Mac)、安装Vue脚手架、初始化Vue项目-命令解释(Vscode、命令行窗口)、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
- Vue.js环境搭建
简述 小弟刚刚开始写博客,学习VueJs也不久,开这个博客,只是为了多多学习和记录自己的 学习之旅,可能很多地方都很浅薄,还望各位海涵和多多拍砖. 学习Vue也有两个多月了,接触它是在一个很偶然的机会 ...
- [Vue.js] 基础 -- 安装Vue
安装 Vue 版本说明 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器 直接用 &l ...
- idea vue.js插件安装
Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...
- vuejs linux windows,vue.js环境在window和linux安装
一.windows环境下安装vue 1.node.js安装:在node.js的官网上下载node的安装包 https://nodejs.org/en/download/ 安装完毕之后,在命令行下验证是 ...
- vue.js环境部署
一.安装node.js 1.进入node.js中文网-链接: link下载Windows 安装包 (.msi)64位版本. 2.安装node.js. 3.进入cmd命令界面,输入 node -v 查看 ...
最新文章
- android 数据库索引,SQLite数据库提供警告自动索引(列)升级Android L后
- SpringCloud Eureka Client和Server侧配置及Eureka高可用配置
- 设计模式笔记15:代理模式(Proxy Pattern)
- java+web+415_使用json返回HTTP状态415的Web服务 - 不支持的媒体类型
- for循环false 终止 python_python3.5.1给用户3次无效的尝试,然后终止pgm(Simple FOR循环)...
- 数据库MySQL相关操作||创建数据库、显示所有数据库、切换数据库、显示数据库下的数据库表、删除数据库
- maven2+依赖传递
- dockerfile安装oracle,docker通过Dockerfile安装oracle-12c数据库
- JavaScript事件
- 别错过!漂亮又好用的思维导图模板
- 【Linux驱动开发】PS2游戏手柄驱动开发与输入子系统框架
- 新侨快讯:官方公布加拿大时薪最高和最低的工作,你的行业上榜吗?
- echarts+vue3实战(1)
- hdu5963 朋友
- 第七章:项目成本管理 - (7.3 制定预算)
- 语义分割的评价指标——IoU
- 未来两周目标计划---C++ and Disassembly(不积跬步无以至千里,不积小流无以成江海)
- Android 华为手机获取相册图片路径,获取不到问题
- 最好的体育测试软件,体育锻炼标准测试app
- 贝叶斯公式理解(先验概率/后验概率)