关于vue脚手架创建的一点回顾

csm0 2020-04-14

1.首先想使用vue提供的脚手架来编写前端的项目,我们最好先在本机安装好 node.js。

百度,去官网下载

关于vue脚手架创建的一点回顾

 下载完成后,一直点击下一步即可。安装完成后 运行 node -v和 npm -v  如果成功显示版本号即为安装成功

关于vue脚手架创建的一点回顾

初次学习vue 可以先创建一个小项目进行代码学习

步骤:npm inti  --> npm install vue --save      // --save 表示 vue 下载到当前的项目

关于vue脚手架创建的一点回顾

 关于vue脚手架创建的一点回顾

 关于vue脚手架创建的一点回顾

 至此 vue小项目就下载完成了

2.  下载 webpack 工具(静态模块打包器,支持模块化es6的module)

webpack 的作用,简单来说就是对前端中所有的模块进行打包,输出一个JS文件,后续引入这个JS文件。进行项目的管理

npm i -g     // -g 表示 --global 下载全局

关于vue脚手架创建的一点回顾

如果显示版本号表示安装成功

3. vue-cli  脚手架  (作者帮你把开发环境大部分的东西都配置好了,可以直接进行开发不需要再搭建环境了)

下载 vue_cli : https://cli.vuejs.org/zh/

关于vue脚手架创建的一点回顾

 下载完成后,同样, 用 vue -V  检查是否安装成功

关于vue脚手架创建的一点回顾

 如果要使用旧版本(2 版本),需要再下载

关于vue脚手架创建的一点回顾

3.1 创建一个vue-cli项目

vue init <模板> <项目名>

模板: 3.1.1 webpack - simple  简单的配置webpack的模板。

            3.1.2 webpack   正式版

关于vue脚手架创建的一点回顾

 下面经过漫长的等待,只要显示 Project initialization finished! 就表示成功

关于vue脚手架创建的一点回顾

 3.2 启动项目  执行上图 To get started: 下面的两行命令即可。

 关于vue脚手架创建的一点回顾

在游览器中 打开  http://localhost:8080

 关于vue脚手架创建的一点回顾

相关推荐