vue项目创建的几种方法

如果你还没有安装 VueCLI  请执行下面的命令进行安装或是升级:
npm install --global @vue/cli

（不常用）方法一：到创建的文件目录上，右键->Git Bash Here

 

使用 npm init 指令创建项目描述文件 package.json。

 

 

命令行里会以交互的形式让你填一些项目的介绍信息，依次介绍如下：（不知道怎么填的直接回车、回车...）

• name 项目名称
• version 项目的版本号
• description 项目的描述信息
• entry point 项目的入口文件
• test command 项目启动时脚本命令
• git repository 如果你有 Git 地址，可以将这个项目放到你的 Git 仓库里
• keywords 关键词
• author 作者叫啥
• license 项目要发行的时候需要的证书，平时玩玩忽略它

 

----------------------------------------

方法二：vue init  webpack xxx  

如果你还没有安装 VueCLI  请执行下面的命令进行安装或是升级:
npm install --global @vue/cli

在命令中输入以下命令创建Vue项目:
 
输入 vue init webpack demo727  
 
Project name (demo727)    项目名字 (确定则回车)
 
Project description (A Vue.js project)  项目描述 (确定则回车)
 
Author muxinzzz <719014610@qq.com>  作者 (确定则回车)
 
Vue build (Use arrow keys)  构建模式，默认选择第一种
> Runtime + Compiler: recommended for most users   运行时+编译器：建议大多数用户使用
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅限运行时：大约6KB min+gzip，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数
 
Install vue-router? (Y/n)  是否安装引入vue-router  建议y
 
Use ESLint to lint your code? (Y/n) 是否使用ESlint语法 eslint的格式验证非常严格，多一个空格少一个空格都会报错  建议n
 
Set up unit tests (Y/n)  否设置单元测试  建议n
 
Setup e2e tests with Nightwatch? (Y/n)  是否和Nightwatch建立端到端的测试  建议n
 
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  是否在项目创建之后运行“npm install”(建议）
> Yes, use NPM   是的 用npm   建议默认
  Yes, use Yarn  是的 用yarn  跟npm没什么大的区别
  No, I will handle that myself  不 我要自行安装 (选择此项之后 后续仍通过npm install 再次安装) 
  
.......回车之后  等待安装
 
cd demo727   进入项目目录
npm run dev  运行项目

-------------

（常用）方法三：vue create xxx

如果你还没有安装 VueCLI  请执行下面的命令进行安装或是升级:
npm install --global @vue/cli

在命令中输入以下命令创建Vue项目:
vue create toutiao-m  
回车  让你选择创建的模式  default是默认模式
建议选择手动方式  支持更多工具的自定义  Manually select featuews  
回车  接下来让你选择在项目中需要集成的工具 例如: 按空格键选中/取消
 (*) Choose Vue version
 (*) Babel   作用是把项目中es6代码转成es5  用来去兼容低版本浏览器
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router  管理项目中的路由
 (*) Vuex  管理项目中的共享数据状态
 (*) CSS Pre-processors  css处理器  sass less css处理器
 (*) Linter / Formatter  对项目中的代码进行格式化的  还有格式化校验  校验代码格式规范
 ( ) Unit Testing
 ( ) E2E Testing  
回车  接下来会问你是否使用 history 作为你的路由模式
(history模式的url比较简洁  但是兼容性不太好)  所以我们选no
回车  接下来会让你选择要使用那个css处理器
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus  
前两种都是sass  只是编译器不太一样  
从使用角度这几种大同小异 可以选择 第三种 Less
回车  接下来让你选择你的代码校验要使用哪种校验规范
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier 
  推荐选第三种
回车  接下来让你选择在什么情况下触发格式校验
  (*) Lint on save  当我们去修改保存文件的时候
  (*) Lint and fix on commit  当我们去执行 fix commit提交的时候
  这边建议两种都选上
回车  接下来让你选择 Babel, ESLint 生成的配置信息放哪
  In dedicated config files 生成独立的配置文件当中
  In package.json  是把上面的配置信息和package.json写到一起
  推荐 独立配置文件中 这样子查看和维护更加方便
回车  接下来问你Save this as a preset for future projects? (y/N)    是否将你刚才的一系列选择来保存一下  下次可快速创建全新的项目
如果需要 可以输入 y 然后起个名字  
如果不需要 输入no
 
回车  然后根据提示来
 cd toutiao-m
 npm run serve  
 
然后可以看到:
  - Local:   http://localhost:8080/    这是本机访问 
  - Network: http://192.168.1.6:8080/  这是局域网可以访问