美文网首页
Vue CLI 3使用:创建项目(一)

Vue CLI 3使用:创建项目(一)

作者: Raydom | 来源:发表于2019-02-18 16:13 被阅读0次

    Vue CLI 官方提供的脚手架工具,目前已更新到vue cli 3,和之前的2还是有很大区别的。

    安装cli

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

    查看cli版本

    vue -V
    vue --version
    

    快速原型开发

    vue servevue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:

    npm install -g @vue/cli-service-global
    

    vue serve

    在文件目录直接运行vue serve命令

    vue serve [options] [entry]
    
    options:
      -o, --open  打开浏览器
      -c, --copy  将本地 URL 复制到剪切板
      -h, --help  输出用法信息
    

    vue servevue create 将使用创建项目时相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。如果不指定入口文件,会查找 main.jsindex.jsApp.vueapp.vue 这些文件。

    如果需要,你还可以提供一个 index.htmlpackage.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。

    vue build

    你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署:

    vue build [options] [entry]
    
    在生产环境模式下零配置构建一个 .js 或 .vue 文件
    Options:
      -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值:app)
      -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值:入口文件名)
      -d, --dest <dir>       输出目录 (默认值:dist)
      -h, --help             输出用法信息
    

    创建一个项目

    vue create

    vue create test
    

    可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
    更多设置项:

    vue create [options] <app-name>
    
    创建一个由 `vue-cli-service` 提供支持的新项目
    
    选项:
      -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
      -d, --default                   忽略提示符并使用默认预设选项
      -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
      -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
      -r, --registry <url>            在安装依赖时使用指定的 npm registry
      -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
      -n, --no-git                    跳过 git 初始化
      -f, --force                     覆写目标目录可能存在的配置
      -c, --clone                     使用 git clone 获取远程预设选项
      -x, --proxy                     使用指定的代理创建项目
      -b, --bare                      创建项目时省略默认组件中的新手指导信息
      -h, --help                      输出使用帮助信息
    

    使用图形化界面

    也可以使用ui界面进行创建项目

    vue ui
    
    UI 界面创建项目

    然后根据界面提示进行操作创建项目。

    相关文章

      网友评论

          本文标题:Vue CLI 3使用:创建项目(一)

          本文链接:https://www.haomeiwen.com/subject/fspmeqtx.html