当前位置：网站首页>Scaffold cli3

Scaffold cli3

2022-07-20 23:22:00 【Program three two lines】

One 、 summary

Official website

Vue CLI

install

Generally, it is directly installed globally 

npm install -g @vue/cli

Switch to the directory where you want to create the project Use the command to create the project 

vue create mydemo

Start project 

npm run serve

remarks ：

If npm Execution is slow Please install Taobao in advance npm Mirror image

Two 、 Project structure document analysis

cli3 Analysis of the main structure files of the project created

1、babel.config.js

babel Control documents of , The project involves es6 turn es5 Need help babel, Just use the official configuration directly , If you want to configure your own view babel Official website

2、package-lock.json Version control file The name of the installation depends on the version

3.package.json Project related configuration

4、src/main.js Yes npm run serve Directly execute this file 

/* 
	 This file is the entry file of the whole project 
*/
// introduce Vue  What is introduced here is actually an incomplete version vue  Can be in node_modules Under the vue Under the package.json see   "module": "dist/vue.runtime.esm.js", So use render function 

import Vue from 'vue'
// introduce App Components , It is the parent of all components 
import App from './App.vue'
// close vue Production tips for 
Vue.config.productionTip = false

/* 
	 About different versions of Vue：
	
		1.vue.js And vue.runtime.xxx.js The difference between ：
				(1).vue.js It's a full version Vue, contain ： Core functions + Template parser .
				(2).vue.runtime.xxx.js It's a running version Vue, Contains only ： Core functions ; No template parser .

		2. because vue.runtime.xxx.js No template parser , So it can't be used template Configuration item , Need to use 
			render Function received createElement Function to specify the specific content .
*/

// establish Vue Instance object ---vm
new Vue({
	el:'#app',
	//render Function completes this function ： take App Put components in containers 
  render: h => h(App),
	// render:q=> q('h1',' How do you do ')

	// template:`<h1> How do you do </h1>`,
	// components:{App},
})

5、assets Used to put static resources such as pictures video etc.

6、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
		<!--  in the light of IE A special configuration of the browser , It means let's IE The browser renders the page at the highest rendering level  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--  Open the ideal viewport of the mobile terminal  -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!--  Configuration tab icon  -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<!--  Introduce third-party styles  -->
		<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
		<!--  Configure page title  -->
    <title> Silicon Valley system </title>
  </head>
  <body>
		<!--  When the browser doesn't support js when noscript The elements in the are rendered  -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
		<!--  Containers  -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、 Modify the default profile

cli3 All are hidden by default webpack To configure To view , Use command

You can use the command to webpack Configure output to a file to view , This file is just for viewing 

vue inspect > output.js

see entry node It shows that the entry file is main.js, If you want to modify the entry file , You can see cli The method given on the official website

Configure the reference | Vue CLI

You need to create one yourself vue.config.js

Refer to 

module.exports = {
  pages: {
    index: {
      // page  Entrance 
      entry: 'src/index/main.js',
      //  Template source 
      template: 'public/index.html',
      //  stay  dist/index.html  Output 
      filename: 'index.html',
      //  When using  title  Option ,
      // template  Medium  title  The label needs to be  <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      //  The blocks included in this page , By default, it contains 
      //  The extracted universal  chunk  and  vendor chunk.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    //  When using the entry only string format ,
    //  The template will be derived as  `public/subpage.html`
    //  And if it can't be found , Just go back to  `public/index.html`.
    //  The output filename is derived as  `subpage.html`.
    subpage: 'src/subpage/main.js'
  }
}
原网站

版权声明
本文为[Program three two lines]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207192236104846.html

边栏推荐

猜你喜欢

随机推荐