使用vue-cli创建前端项目

发表于 | 分类于 | 阅读次数 | 字数： 343

使用vue-cli建项记录，避免以后再次踩坑。

  1. 安装vue-cli包

    1
    npm install -g @vue/cli

  2. 全局扩展安装

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

  3. 在文件夹内创建App.vue文件并且写入

    1
    2
    3
    <template>
      <h1>Hello!</h1>
    </template>

  4. 在刚刚创建的文件夹下输入命令

    1
    vue serve

    官网提示：vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。

以上是vue-cli环境搭建和基础命令使用。

创建一个项目

使用下面这个命令创建一个项目

1
vue create fuck-door

然后会弹出选项， 我选择默认快速创建，其他配置我看了一下以后用到再加。

还可以用下面这个命令查看创建的更多方法

1
vue create --help

还有一种跟简单粗暴的方式直接在网页中创建项目

1
vue ui

恕我直言 ，vue-cli创建项目和用vue ui 添加插件爽到我了XD….

添加element-ui

在项目文件夹内输入

1
vue add element

https://github.com/ElementUI/vue-cli-plugin-element

根据提示安装即可。

当然这一步也可以在上面 vue ui里plugins找到element ui plugins 添加创建element ui项目。