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环境安装相关推荐

  1. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  2. 关于node.js 和vue.js的安装、卸载、浏览器测试问题?

    关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...

  3. 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 ...

  4. 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.安装 ...

  5. Vue.js环境搭建

    简述 小弟刚刚开始写博客,学习VueJs也不久,开这个博客,只是为了多多学习和记录自己的 学习之旅,可能很多地方都很浅薄,还望各位海涵和多多拍砖. 学习Vue也有两个多月了,接触它是在一个很偶然的机会 ...

  6. [Vue.js] 基础 -- 安装Vue

    安装 Vue 版本说明 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器 直接用 &l ...

  7. idea vue.js插件安装

    Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...

  8. vuejs linux windows,vue.js环境在window和linux安装

    一.windows环境下安装vue 1.node.js安装:在node.js的官网上下载node的安装包 https://nodejs.org/en/download/ 安装完毕之后,在命令行下验证是 ...

  9. vue.js环境部署

    一.安装node.js 1.进入node.js中文网-链接: link下载Windows 安装包 (.msi)64位版本. 2.安装node.js. 3.进入cmd命令界面,输入 node -v 查看 ...

最新文章

  1. android 数据库索引,SQLite数据库提供警告自动索引(列)升级Android L后
  2. SpringCloud Eureka Client和Server侧配置及Eureka高可用配置
  3. 设计模式笔记15:代理模式(Proxy Pattern)
  4. java+web+415_使用json返回HTTP状态415的Web服务 - 不支持的媒体类型
  5. for循环false 终止 python_python3.5.1给用户3次无效的尝试,然后终止pgm(Simple FOR循环)...
  6. 数据库MySQL相关操作||创建数据库、显示所有数据库、切换数据库、显示数据库下的数据库表、删除数据库
  7. maven2+依赖传递
  8. dockerfile安装oracle,docker通过Dockerfile安装oracle-12c数据库
  9. JavaScript事件
  10. 别错过!漂亮又好用的思维导图模板
  11. 【Linux驱动开发】PS2游戏手柄驱动开发与输入子系统框架
  12. 新侨快讯:官方公布加拿大时薪最高和最低的工作,你的行业上榜吗?
  13. echarts+vue3实战(1)
  14. hdu5963 朋友
  15. 第七章:项目成本管理 - (7.3 制定预算)
  16. 语义分割的评价指标——IoU
  17. 未来两周目标计划---C++ and Disassembly(不积跬步无以至千里,不积小流无以成江海)
  18. Android 华为手机获取相册图片路径,获取不到问题
  19. 最好的体育测试软件,体育锻炼标准测试app
  20. 贝叶斯公式理解(先验概率/后验概率)

热门文章

  1. 算法:两种步长的希尔排序算法
  2. 汇编中常用的DOS系统调用功能号
  3. CM005-逆向分析过程(上篇)
  4. 英特尔推出颠覆性架构:3D堆叠芯片,10nm制程明年上市
  5. 将DataTable中的数据一次性提交到数据库中
  6. elk,logstash -elastcisearch 429
  7. POJ-2481 Cows---树状数组的运用
  8. 3年,感谢你与几维安全一起经历的风风雨雨
  9. 如何让网站用上HTML5 Manifest
  10. Jexus部署.Net Core项目