Vue+element project construction

foreword

There have been some small moves recently. There are two projects that need to be advanced, and the front-end stuff has to be picked up.

environment

Since my current environment is still vue2, this development is still mainly vue2. Of course, it is not difficult to switch. I just don't bother to configure the environment here. It's tiring. I can't forget my iris version problem when I played go. one day.

vue-cli project creation

My local vue version is still 2.5x
, so I can't create a project. I can't vue create or I can only vue init webpack name
. I just want to say a few things about project creation. The first npm is really slow, it is not recommended to use it, it is recommended to download cnpm first .

 npm install -g cnpm --registry=https://registry.npm.taobao.org

Then find a suitable location to start creating our project.

The words here are still the old rules. After the first few yess, I suggest that you select the route first, and then enter our project after the no and
insert image description here
other no
insert image description here
. Here, it generates the routing code for us, but we do it here. A small makeover.

Retrofit one

Project structure.
insert image description here

Retrofit II

insert image description here

Retrofit three

change icon
insert image description here

test

You can see the effect.
insert image description here
At this point, our basic project transformation is completed.
Then import our element ui component library. (In fact, at this time, I can choose to directly get the dependencies of the project I wrote last time directly)

使用 element

First we have to download

cnpm i element-ui -S

In this case, you can actually choose to add a -g and download it globally.

then import the component


/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

insert image description here

install loader

This is mainly the css that loads the element ui

cnpm install sass-loader node-sass --save-dev


test

ok, let's test it next.
Introduce our button test into our component.
insert image description here

insert image description here

Summarize

I recalled the process again, and then went to the components.
This time there is more time, after all, I am not a novice, so it should be faster.

Guess you like

Origin blog.csdn.net/FUTEROX/article/details/123629133