Vue-cli前端工程配置

全局安装Vue-cli工具

在任意目录打开任意命令行终端(cmd,powershell,vscode内置等)

npm install -g @vue/cli
# OR
yarn global add @vue/cli

注意,要使用yarn安装vue-cli的话,需要先执行npm i yarn -g安装yarn。

验证安装

vue --version

创建工程骨架

创建项目

cd到要创建项目的目录,执行以下命令

vue create 项目名称

选择项目模板

  1. create项目后,出现项目模板选择界面,用↑↓键操作,Default ([Vue 3] babel, eslint)是vue3的官方标准模板,包含vue3,babel和eslint,Default ([Vue 2] babel, eslint)是vue2的官方标准模板,包含vue2,babel和eslint,Manually select features是手动自定义,一般都选手动自定义,选中手动自定义,回车确认。
    Vue-cli前端工程配置_第1张图片
  2. 选择需要的包,操作是:↑↓键切换选项,空格切换选中与不选中,回车确认并进入下一步。只选了babel
  3. 选择vue版本,有3.X和2.X,仍然是↑↓键切换选项,回车确认并进入下一步,这个按需要选择,本文选择2.X。Vue-cli前端工程配置_第2张图片
  4. 选择包配置的管理文件,In dedicated config files是vue默认的配置管理文件,In package.json是npm项目默认的配置管理文件,选择In dedicated config files,回车确认并进入下一步Vue-cli前端工程配置_第3张图片
  5. 选择是否保存当前的模板配置,输入y就保存,需要输入一个模板名称来保存这次的配置,输入N就退出,这个选项按需要决定。

试运行

cd 项目名称
npm run serve

你可能感兴趣的:(vue.js,前端,javascript)