如何开始一个Vue项目

Vue 开发环境配置

Vue 生态为我们提供了一个配套的脚手架 Vue Cli 参考官方文档:https://cli.vuejs.org/zh/guide/

使用脚手架之前首先要全局安装 ，vue 脚手架分新旧版本有一些区别，支持有所不同，可以参考官方文档介绍

npm install -g vue-cli  (2.x)   

npm install -g @vue/cli-init  (2.x 到 3.X 过度 可以使用2.x 的init 命令)

npm install -g @vue/cli 在执行此命令时 出了点小问题 之前配置的node 环境有问题

//卸载当前的版本 安装制定版本

npm uninstall -g @vue/cli

npm install -g @vue/cli@版本号

=========================================================

创建项目

vue create myvuedemo

在项目创建过程中有一些选择 根据自己的需要记性选择即可

另外cli 3.x及以上的版本支持使用vue ui 可视化的方式创建项目并进行对应的初始化配置

执行命令 vue ui 即可

cd myvuedemo

npm run serve 可以将初始化的项目跑起来

项目配置 在运行完成后自动打开浏览器 

在文件 package.json 中 找到 scripts节点 增加--open 如下：

"scripts": {

        "serve": "vue-cli-service serve --open",

        "build": "vue-cli-service build",

        "lint": "vue-cli-service lint"

    },

具体其他配置参考官方文档 https://cli.vuejs.org/zh/guide/prototyping.html

脚手架创建的项目已经有了基本配置 这样我们可以将更多的经历放在项目的设计及对应业务逻辑的实现上。