vuecli--easystudy v1.0.8

vuecli--easytudy（中文）

功能概述：

暂无

快速使用：

1.安装

yarn add vuecli--easystudy -D

2.配置

在您的vue项目中配置package.json

  "scripts": {
     ···
    "easystudy":"node ./node_modules/vuecli--easystudy/index.js",
    "vueserve":"vue-cli-service serve",
    "serve": "npm-run-all -p -r vueserve easystudy ",
	 ···
  },
	//这样在vue-server启用的时候也会启用该脚本

3.使用

1.vue serve（在serve中同时使用）

2.node ./node_modules/vuecli--easystudy/index.js（单独开启）

在你 更改文件内容，重命名，新建文件，删除文件， 时会自动更新

tips：

1.根组件（出口文件：App.vue）中基本结构有了就行

<div id='app'><div>
//这个id为app的唯一div必不可少

必不可少

2.子组件（入口文件夹）中的.vue文件都要暴露 name：’xxx‘

基本结构详见见：5.基本结构

☝☝☝以上三步配置完即可运行

4.出入口文件

默认入口：项目根/src/components

默认出口：项目跟./src/App.vue

如需更改：

项目根目录创建easystudy.config.js并配置

module.exports = {
    easystudy: {
        //入口文件夹    vue子组件父级文件夹（你写demo的地方）
        entry: path.join(__dirname, './src/components'),
        //出口文件  vue根组件
        output: path.join(__dirname, './src/App.vue'),
        //灵敏度（建议1500以上，不然会有可怕的事情！）
        time: 1500,//毫秒
    }

}

5.基本结构

1.出口文件（vue的根组件）

​ (基本结构不会自动生成！初次使用请手动生成基本结构)

<template>
	<--你的代码-->
  <div id="app"></div>
	<--你的代码-->
</template>

<script>
//你的代码
export default {
//你的代码
}
//你的代码
</script>

<style>
/*你的代码*/
</style>

2.入口文件（子组件，就是自己练习demo的地方）

只要暴露name就行，请遵守组件命名规则

//你的代码
<script>
//你的代码
export default {
  name: "ookk",
//你的代码
};
//你的代码
</script>
//你的代码

vuecli-easytudy（English)

Function overview:

None

Quick use:

1. Installation

yarn add vuecli--easystudy -D

2. Configuration

Configure package.json in your vue project

"scripts": {
···
"easystudy":"node ./node_modules/vuecli--easystudy/index.js",
"vueserve":"vue-cli-service serve",
"serve": "npm-run-all -p -r vueserve easystudy ",
···
},
//This will enable the script when vue server is enabled

3. Use

1. Execute vue serve

2. Create your demo exercise in the sub component (portal folder) After you change the file content and rename the file, it will be automatically updated tips：

3. The basic structure in the root component (export file: App. vue) is OK

4. The name: 'xxx shall be exposed for the files in the sub component (entry folder)‘ See: 5. Basic structure

☝☝☝After the preceding three steps are complete, the system runs

4.Access documents

Default entry: project root/src/components Default exit: project and./src/App.vue To change: Create easystudy. config. js in the project root directory and configure

module. exports = {
easystudy: {
//Entrance folder vue sub component parent folder (where you write the demo)
entry: path. join(__dirname, './src/components'),
//Export file vue root component
output: path. join(__dirname, './src/App.vue'),
//Sensitivity (It is recommended to exceed 1500, or something terrible will happen!)
Time: 1500,//ms
}
}

5. Basic structure

1. Export file (root component of vue) (The basic structure will not be generated automatically! Please generate the basic structure manually for the first time)

<template>
<-- your code -->
<div id="app"></div>
<-- your code -->
</template>
<script>
//Your code
export default {
//Your code
}
//Your code
</script>
<style>
/*Your code*/
</style>

2. Entry file (subcomponent, which is the place to practice demo) As long as the name is exposed, please follow the component naming rules

//Your code
<script>
//Your code
export default {
name: "ookk",
//Your code
};
//Your code
</script>
//Your code