参考博客：https://www.runoob.com/w3cnote/vue2-start-coding.html
我是mac电脑
先确保电脑中已经安装了npm 并且使用npm安装过了node。 如果没有，可以参考另一篇文章： https://www.jianshu.com/p/2352a2b4cb14
安装webpacket
执行命令 npm install webpack -g
安装脚手架 vue-cli
执行命令npm install @vue/cli -g
创建项目
在硬盘上找一个文件夹放工程用的，在终端中进入该目录
cd 目录路径
vue create <project-name>
根据提示完成创建
image.png
现在比较流行这样的创建方式，再自己配置一个vue.config.js文件。vue.config.js文件配置可以参考文章：https://www.jianshu.com/p/b358a91bdf2d
创建完成后如下图所示结构：
image.png
启动项目
终端来到此项目文件夹，使用命令npm run serve启动服务器
image.png
启动后复制链接 http://localhost:8080/ 或者http://10.10.30.88:8080/ 到浏览器打开。 也可以在同一个局域网内的其他设备上用浏览器打开链接http://10.10.30.88:8080/
下面的使用模板创建可以选择不看！！！！
根据模板创建项目(需要vue-cli 3.0以下版本 或者安装vue-cli-init)
vue init <template-name> <project-name不能用中文>
从而自动生成的项目模板，比较常用的模板有webpack、webpack-simple、browserify等模板。
下面使用 vue init webpack test 命令来创建一个基于 webpack 模板的新项目
会有一些初始化的设置，如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字
命令行实例：
image.png
Project name ==> 工程名 回车即可
Project description ==> 工程描述 回车即可
Author ==> 作者 随便填一下
Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
Should we run npm install for you after the project has been created? ==> 是否使用npm安装依赖 回车即可
cd 命令进入创建的工程目录
安装 vue 路由模块vue-router和网络请求模块vue-resource
npm install vue-router vue-resource --save
启动项目
npm run dev
运行成功会看到这个页面
image.png
最后就是在编译器中编写项目咯~~
网友评论