Vue2 project creation
1. Environment construction
This article is based on vue2.x the development environment
1. <script>Import directly with
Download the vue.js file directly and <script>import it with tags
<script src=”c:/vue/2.6.14/vue.min.js” />
2.cdn
<script src=”https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js” />
3.npm
NPM installation is recommended when building large applications with Vue . NPM works well with module bundlers like webpack or Browserify. At the same time, Vue also provides supporting tools to develop single-file components.
npm i vue
4. Command line tool (cli)
Vue provides an official command-line tool that can be used to quickly build large single-page applications. The tool provides out-of-the-box build configurations for modern front-end development workflows. It only takes a few minutes to create and start a project with hot reload, static checking on save, and a production-ready build configuration:
Step 1: Install vue-cli globally:$ npm i -g @vue/cli
Step 2: Create a new project based on the webpack template:$ vue create my-project
Step 3: Enter the project directory and start the service: $ cd my-project ; ``$ npm run serve
You only need to use one of the above four ways to introduce Vue.
Notice:
The first method of direct import has flaws, it cannot be directly released, there is no compression, the efficiency is low, and the plug-ins are not complete
The fourth type can solve the above problems very well. The command line tool can use the plug-in to quickly build a project, and package, compress and merge for easy project release.
Two, the specific implementation steps of the command line tool
-
First install vue-cil globally:
You can
vue --versioncheck whether the installation is successful
-
To create a project, first enter the root directory of the folder where the project is to be created, open the cmd window in this folder, and then enter the creation command
vue create 项目名称
carriage return
Enter, choose what you want
carriage return
carriage return
carriage return
carriage return
carriage return created
3. Operation of the project
The first: in the folder where the project was created
Open the cmd window and execute the cd project name to enter the folder where the project is located
Execute the npm run serve command
Paste the address behind local and run it in the browser
The second: in the created project folder
Open cmd directly on the address bar in the project folder and execute the npm run serve command
The third: run in VSCO
Open the newly created project with VSCO, and then use `ctrl+`` on the VSCO interface after opening
open terminal
Execute the npm run serve command in a terminal window
Finish
When an error occurs during the above operation, the solution
Open cmd and run it to solve the problem
4. About project files
5. About vue files
A .vue file is a component, and there is only one root component App.vue in a project
A .vue file is generally composed of three parts: template, script, style
The template writes tags inside, there can only be one root element
Script writes js logic inside, needs export default {} inside, all js code needs to be written here
The css syntax inside the style can make the styles between multiple .vue files independent of each other by setting the scoped attribute
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-LFKRZI6I-1667106450512) (F:\notes\self\third stage\vue2 environment construction\51.png) ]
The template writes tags inside, there can only be one root element
Script writes js logic inside, needs export default {} inside, all js code needs to be written here
The css syntax inside the style can make the styles between multiple .vue files independent of each other by setting the scoped attribute
