1. Create a new vue project
1. Select the project directory and run the command vue init webpack vueFirst on the command line . Explain this command. This command means to initialize a project, where webpack is the build tool, that is, the entire project is based on webpack. where vueFirst is the name of the entire project folder.
caution:
When the vue2.0 version is installed, the situation shown in the figure will appear
WULI be good, there is WARN! ! ! . Don't panic. The part in the picture has been shown finished, so you can continue to develop the baby.
If you have any questions, you can browse the article https://my.oschina.net/u/3797724/blog for instructions
Open the vueFirst folder and the project file looks like this.
2. Installation dependencies
Continue to enter the following commands in sequence at the command line:
cd vueFirst
npm run dev
3. Run the project (usually the default port is 8080, open the browser and enter localhost:8080)
caution:
If port 8080 is occupied, you need to modify the configuration file config/index.js
After the change, the default home page of vue can be displayed normally. WULI be nice
Second, the following introduces Element
1. In the current directory, run the command line: npm i element-ui -S (efficient and practical: cnpm i element-ui -S)
Reminder: If you do not need to enter a command when the vue project is running, you must exit the execution first.
“Ctrl+C”
After exiting, you can run other commands! WULI be nice
2. Add code (red) in src/main.js
3. Then you can use it directly in the .vue file
Make some modifications in src/components/Hello.vue (in the red box)
4. Execute the command: cnpm run dev run view
5. The above (2) sometimes reports an error. First, check whether the index.css path of element-ui is correct. Second, because the error will show that the file cannot be found, you need to add a section to the build/webpack.base.conf.js file. code show as below.
6. Execute the command: cnpm run dev run view
WULI is running obediently.