Many vue3.0 really simpler than vue2.0
1. Initialize project
1.1 Global installation vue-cli
Creating vue project, first make sure vue global command-line tools installed
I intend to use this yarn, because npm easy to use and more yarn than is strongly recommended.
yarn add -g @vue/cli
yarn switching source Taobao yarn config set registry http://registry.npm.taobao.org
Install this package will depend greatly accelerate the pace of
1.2 New Project
Use vue-cli3 development project, you can use the graphical interface, you can also use the command line
I have here a graphical interface for input terminal can occur in vue ui interface
Then select the preprocessor we need to install
After installing and then into our project start project
yarn serve
After the execution, there is no error, the installation is no problem
2. Project Structure
vue has given us a new initial project structure, project structure but this is still not perfect. We need to look at a few new directory, all the new directories are stored under the src directory.
1. views users to store our pages
2.store placed vuex program
3.api place all the interface program
4.utils placement tool function
5.router placed routing information
6.styles placed global style
7.components This file is used to store the components of our pages, we can create a new component in the following directory, but this is not clear, we want to create a new folder for each page, each page to the assembly on the corresponding file
8.assets this has been used to store our resources files, video, audio, pictures, etc.
3. Projects
Yourself a product manager, a virtual library management project
We have two pages: 1. login page, users will be able to enter the account number and password 2. Go to our home page, displays some information about the book
Project involves the following:
1. Click on the jump
2. Request
3. Display
Therefore treatment, vue available to our components, we also need to add it manually following components
1. routing components: vue-router
2. The request component: axios mock
3. ui 组件: element-ui sass
4. Form authentication component: vue-validate
The state vuex js-cookie
Now we further develop our pages on demand by step
4. Development Project
4.1 login page