Vue 脚手架CLI 初始化项目

转载 作者：知者 更新时间：2024-03-13 08:00:14 27 4

npm install webpack -g

# 脚手架3.x（后面拉一个模板就能用2）
npm install -g @vue/cli

vue --version

vue create my-project

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

vue init webpack my-project

npm run build

npm run serve

# 编辑器配置
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

// https://eslint.org/docs/user-guide/configuring
// eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，
// 如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    // 'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "no-unused-vars": 'off',  // 关掉语法检查
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

vue create my-project

"dependencies": {
    // 修改下面
    "vue": "^2.6.11",
},
"devDependencies": {
    // 修改下面
    "vue-template-compiler": "^2.6.11"
}

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 饿了么
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Test from "../views/Test";

Vue.use(VueRouter)

const routes = [
  //  component: () => import('../views/Ajax.vue')
  {
    path: '/',
    name: 'Test',
    component: () => import('../views/Test.vue')
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

npm install --save vue-router

npm install --save axios

npm i element-ui -S
npm install --save element-ui

npm install echarts --save

27 4 0

• Odoo - 脚手架？

  我读了here您可以使用命令构建模块，因此您无需手动创建一些初始文件。但是这样的命令在 master 上不起作用(在 Odoo 开发分支上): ./oe scaffold Academy ../my-

• Grails 脚手架 - 为域类的此属性定义可能的值

  我是 Grails 新手。我有一个 Person 域类: class Person { String firstName String lastName String gend

• php - PHP 脚手架

  关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this

• angularjs - 脚手架 Angular 应用程序时出错

  我使用 yeoman 作为脚手架工具，但出现以下错误。任何人都可以帮我解决这个问题。我正在使用 Windows 8 环境。 karma-jasmine@0.1.5 node_modules\karma

• grails - 脚手架 Controller Action

  我正在查看使用grails generate-all生成的 Controller 。为什么同时存在create和save操作，是否有原因？对于我来说，仅将create作为操作并将save作为服务对我来

• templates - grails模板-脚手架 Controller

  我是个新手。我现在正在研究脚手架模板，尤其是在 Controller 上。我每次生成时都想要一个自定义的 Controller ，所以我使用了“安装模板”。我总是在 Controller 上创建Com

• c# - 如何将引用程序集用于 Controller 脚手架

  我有一个类库，其中包含一些模型类和一个 DbContext 类(所有这些类都是公共(public)的)。该类库由 MVC-5 应用程序引用。 是否可以使用该引用类库中的模型类来构建该 MVC-5 应用

• css - 在容器大小而不是窗口大小上应用 Bootstrap 脚手架

  我有一个使用 Twitter Bootstrap 构建的单页应用程序。我的应用程序有几个模态对话框，它们通常占页面宽度的 70%，并且水平居中。我的页面和模态设置是这样的: 我在模态框内放置了一行和几

• html - Bootstrap 脚手架 @ 3600x1920

  我正在开发一个具有某种“协调器”界面的网络应用程序。我希望能够支持我正在使用的 Eyefinity 设置(即 3 个纵向显示器，分辨率为 3600x1920，或 3780x1920，并启用了边框校正)

• php - Codeigniter 2 脚手架

  在处理 codeigniter 中的脚手架时，我有哪些选择 - 人们经常使用脚手架吗？或者是否有更好的方法来快速生成用于 CRUD 应用程序的代码？ 我已经安装了 Spark 塞:http://cod

• c# - 脚手架-DbContext 到不同的输出文件夹

  我正在我工作的公司解决方案中实现存储库模式，将后端项目中的模型类与 DbContexts 项目中的数据库上下文和迁移分开。 我正在使用 Scaffold-DbContext 将我的后端项目设置为模型类

• 不重复造轮子都是骗小孩的，教你手撸 SpringBoot 脚手架！

  目录 1、前言 2、什么是脚手架呢? 3、谁提供了脚手架? 1、Spring 官网脚手架 2、阿里云脚手架 4、手撸一个脚手架!

• 上下文给出的 flutter 脚手架 "does not contain a Scaffold"

  我在脚手架中有一个应用栏。 return Scaffold( appBar: styling.appBar( AppBar( leading: styling.icon

• android - Jetpack Compose 脚手架 + 模态底板

  我正在尝试使用 Compose 设计一个布局，其中包括: 热门应用栏 正文(内容) 底部应用栏 单击时表示菜单的底部表(模态底部表) -------TopAppBar------ ------主要内容

• visual-studio-2010 - 脚手架/在初始值设定项中生成对象的属性

  有谁知道如何为所有对象属性“构建”或“生成”构造函数块？我有 VS2010 和 Resharper，我希望生成类似的东西: public Customer CustomerB = new Cu

• Grails 脚手架 404 与 byte[]

  我正在尝试在 grails 中上传文件。生成的脚手架对我不起作用，给我一个 404 寻找“save.jsp” 域名 class Simple{ byte [] avatar static co

• spring-roo - 我想禁用 Roo 脚手架

  因为我已经手动调整了我的实体和 Controller 以及 View ，所以我希望 roo 不更改它们中的任何一个。尽管如此，我还是希望继续为所有新实体搭建脚手架。我怎么能那样做 最佳答案 您可以通过

• grails - 如何在Grails中设置 Restful Controller 脚手架

  我使用命令grails generate-restful-controller Domain创建了一个 Restful Controller ，如何在创建的 Controller 中设置scaffol

• grails - 完全覆盖或使用前缀覆盖 Grails 脚手架 URL

  我有一个定义了 staticscaffold = true 的 Controller ，以及一些自定义操作。 我想确保只有登录用户和 ADMIN 类型的用户(我们域中的某些 Enum 值)才能访问它。

• java - Grails 脚手架 View 中没有水平滚动

  我有一个表，其中某些列的值相对较长，并且在我的 Grails 应用程序中为其打开了动态脚手架(我使用的是 Grails 3.3.8)。因此，在某些屏幕分辨率下，它们不适合屏幕，并且最右边的列最终会出现