vue-cli创建项目步骤解析

vue-cli创建项目

一：安装vue-cli

前置条件：必须装过了node，不然没法使用npm命令。

• 下载vue-cli

  yarn add @vue/cli -g
  或
  npm install @vue/cli -g
  // 也可以使用cnpm下载
  

• 查看是否安装成功

  // V 需要大写
  vue -V
  

  出现版本号就是安装成功。目前最新的版本是4.X

二：创建项目须知

前置条件：在你要创建项目的文件夹下，打开cmd,确保路径正确

• 输入命令：

  vue create 项目名称
  // 项目名称必须全部是小写字母
  

• 选择配置项：

  • default (babel, eslint) 默认配置
  • Manually select features 手动配置

  选择默认配置，就一路enter到底了，最终生成的项目，不带路由，没有vuex，只有最基本的配置。

  所以这里选择，手动配置。

• 选择项目所需的特色

  1. Babel 转换高级语法【默认选中】
  2. Typescript 高级的JavaScript语法
  3. Progressive Web App (PWA) Support 渐进式Web应用程序(PWA)支持
  4. Router vue路由
  5. Vuex vue仓储
  6. CSS Pre-processors css扩展语言 —> less，scss
  7. Linter / Formatter 代码格式化程序 【默认选中】
  8. Unit Testing 单元测试
  9. E2E Testing 端对端测试

  一般我们的项目除了默认选中的，还需要有 Router路由 这个关键的。css扩展语言看个人是否需要，我这里需要，Vuex仓储，大项目用，小项目尽量不要用，但是我这里用。

  所以我选择了:babel，typescript，router，vuex，CSS Pre-processors、Linter / Formatter

  注意：

  • Typescript 不会，就不要选了，项目默认是JavaScript。
  • 创建完成之后的项目，路由那一块会用到路由的懒加载。

• 选完之后，会问你 ：

  • Use class-style component syntax? 【使用类风格的组件语法?】

    写 Y

    ---

  • Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 【使用Babel和TypeScript(现代模式需要，自动检测填充，置换JSX)? 】

    写 Y

    ---

  • Use history mode for router? (Requires proper server setup for index fallback in production)【使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) 】

    如果你的服务器有配置，就写 Y 【 这样路由中不会出现 # 号】，如果没有，就写 N

    ---

  • Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)【选择一个CSS预处理程序(默认支持PostCSS、Autoprefixer和CSS模块) 】

    这里我选择的是sass/SCSS(with node-sass)

    ---

  • Pick a linter / formatter config【选择linter / formatter配置】

    选择第一项即可 ESLint with error prevention only

    ---

  • Pick additional lint features 【选择额外的linter功能】

    选择第一项即可：Lint on save

    ---

  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?【你想让你的配置保存到哪里】
    两个选项，保存到专用的配置文件中 或者是 保存到package.json里.
    这个看个人意愿，我选择第一项。

    ---

  • Save this as a preset for future projects? 【把它作为未来项目的预置?】

    写 N，毕竟每个项目需要的不一定相同。

    ---

• 选择完成之后，程序就开始自动进行模板的创建了。网速好的话，一会就能创建完成。

  在末尾，会提示你 通过cd 命令，进入到项目目录下，然后通过运行命令启动项目。

  这些东西，在项目的README.md文件里会有体现。