Vue Cli3.0 visual building tool – Vue UI
1. Installation environment
The latest Vue CLI is installed. Run the Terminal command and enter NPM install -g@vue /cli or YARN global add @vue/cli
Use -v to view the version you just installed: vue -v 3.0.0-RC.10
After updating vue-CLI, the previous 2.0 build method is no longer available and needs to be downloaded again
yarn global add @vue/cli-init
Initialize the Vue UI and type in a clean directory:
vue ui
This command automatically opens the browser, and the following page is displayed
2. Add projects
There are two ways to add a new project
1. Visual additions
Visual add
If the custom project configuration has been saved, it will be displayed in the first option when it is created. The configured options are synchronized to the vue.config.js file
After clicking Create project, you can save this configuration and use the same configuration for future project creation
Skip this step and start to download the relevant plug-in. At this time, the command line synchronizes the download and the visual tool controls the command line to create a new project
2. Add commands
vue create <project-name>
? Please pick a preset: (Use arrow keys) ❯ my-test (vue-router, vuex, sass, Babel, eslint) default (Babel, eslint) Manually select features? Check the features neededforyour project: (Press <space> to select, <a> to t oggle all, < I > to Invert Selection) ❯◉ Babel Infection infection infection TypeScript infection Progressive Web App (PWA) Support infection of Router infection infection infection Vuex infection of CSS pre-processors ◉ Linter/Formatter Infection Unit Testing infection of E2E Testing? Check the features neededfor your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback
inproduction) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS ? Pick a linter / formatter config: Prettier ? Pick additional lint features: (Press <space> to Select, <a> to Toggle all, < I > to Invert selection) ❯◉ Lint on save infection of Lint and fix on commit? Pick additional lint features: Lint on save ? Wheredo you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n
Copy the codePress the space bar to select
Vue CLI v3.0.0-rc.10
✨ Creating project in/Users/zjy/ttt. 🗃 Initializing git repository... ⚙ Installing CLI plugins. This might take a while... Yarn Install v1.0.1 info No lockfile found. [1/4] 🔍 Resolving Packages... ⠐ @ Babel/[email protected]Copy the codeStart building the project
Third, tool analysis
1. The plug-in
Once the installation is complete, you can view the plug-ins installed under the project, and you can add additional plug-ins
2. Rely on
To view the resources that the project depends on, you can directly view the relevant official website or source code
Configuration of 3.
The project can be configured, and the configuration options are in vue.config.js
Task 4.
You can debug locally, package,
Perform performance analysis on the project
Iv. Vue Cli3 project structure analysis
The build and config folder in vue-Cli2.0 is unified in vue.config.js. The static folder is removed and the views folder is added in public Src, which is used to store view components. Components holds common components
1. Vue. Config. Js configuration
Reference Documents: Configuration documents
module.exports = {
baseUrl: '/',
outputDir: 'dist',
lintOnSave: true,
compiler: false// Adjust the internal WebPack configuration. / / check https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md chainWebpack: () = > {}, configureWebpack: () => {}, // configure the webpack-dev-server behavior. devServer: { open: process.platform ==='darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false, / / refer to https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md# configure proxy
proxy: null, // string | Object
before: app => {}
}
....
}
Copy the codeAli fly ice
Fly ice:website
Enter the official website to download GUI tools, select template to create the project, the project page can select the block to add components
Select the template and create a new project
Local debugging:
Add components to the page
Click the corresponding + on the right of the page list to select the material source under the corresponding frame. A Component folder will be generated under the page directory to store the downloaded Component resources. After the configuration, it will take effect.
Project directory
Importing an existing project
Project adaptation Settings: documentation
Existing projects are connected to Iceworks
To connect an existing project to Icewokrs, add a project description with corresponding information
- Json file. Adding the ice-scaffold keywords field indicates that this is a template project that is compliant with the ICE specification.
{
"name": "my-project"."keywords": ["ice-scaffold"],
// ...
}
Copy the code- Describes the framework language used by the project
Json file adds the scaffoldConfig field as shown in the following example:
{/ /..."scaffoldConfig": {
"type": "react"."name": "ice-design-pro"."title": "ICE Design Pro"."screenshot": "https://img.alicdn.com/tfs/TB1_bulmpOWBuNjy0FiXXXFxVXa-1920-1080.png"}}Copy the codeThe scaffoldConfig.type field describes the name of the framework used by the current project, such as React Vue Angular, which is used to map to the material source.
- Package. json The executable command NPM run start NPM run build exists
These two commands are used to start the debug service build project functionality, and you can use your own command line tools.
{
"scripts": {
"start": "custom-cli start"."build": "custom-cli build"}}Copy the codeconclusion
Vue Cli3.0 carries out visual construction for Vue projects. Ali Feibing focuses on the three mainstream frameworks, but supports react materials the most, and also supports the construction of custom materials. However, the product is in its early stage and has many shortcomings. For example, the failure rate of project download dependency is high. The imported project page directory must be Pages, and the compiled file directory must be Build, otherwise the software cannot recognize and display. These issues should gradually be resolved as the software is further optimized. For teams with their own fixed framework templates, consider using such a sophisticated set of tools to quickly build projects.
Spread the word
This article is published in Front of Mint Weekly. Welcome to Watch & Star.