Introduction: Some time ago studied under vue, can be considered a simple development, today recorded by how to install vue vue-cli.
Because vue is based on the node environment, if you do not install it, I may have a look in this tutorial: install node.js and npm Tutorials
The following assumes you already have nodejs environment
1, the installation package vue-cli3
-g @ VUE the install NPM / CLI # OR Yarn Global the Add @ VUE / CLI
check the version shown below
2, create a project vue
vue create hello-world
you will be prompted to select a default installation or by manually install. You can select the first default contains the basic Babel + ESLint provided, may be selected from the second "manual selection characteristics" to select the desired properties. Here we select Manual. As shown below
When multiple choice, select the blank space next representatives to enter a configuration item, and you manually select the configuration items will be stored in the ~ / .vuerc files in your computer, like this the next time you create when vue project, before you can choose to manually configure configuration, this vue cli3 done very humane Oh,
the options described below
- Babel: The ES6 compiled into ES5
- TypeScript: javascript type of superset
- Progressive Web App (PWA) Support: support progressive web application
- Router: vue-router routing
- Vuex: State Management
- CSS Pre-processors: CSS Pretreatment
- Linter / Formatter: the development of norms
- Unit Testing: Test Unit
- E2E Testing: end to end testing
Usually select the following items on the list, as shown in
After confirmation, ask what kind of language you CSS pre-installed, you are free to choose, I have been using less,
the next step, which asks you to select automatic code formatting detection, with vscode editor Prettier - Code formatter plugin I pick the last one, of course, can choose a third standard configuration
After the next step, the first option is to ask whether you have just saved configuration, select OK next time you create a new project, you have previously selected configuration, do not re-configure it again, the first one I selected
Next, the following meaning to ask you maybe like, babel, postcss, eslint these profiles put what?
The first is: put a separate file placed
second is: put in package.json
is recommended to put a separate configuration file, select the first
Next, the penultimate line to ask you whether these pre-configured to save the future of this project do? Select is
the last one is describing the project
Finalized on the line, go to the directory after the installation is complete, run npm run serve on the line
3, there is a mounting manner by visual
Directly execute the following command on OK
vue ui
Opens in a browser http://localhost:8000 , the page, we can see the following interface (I opened a "night mode", it is a black background).
Create a project
Click 在此创建新项目on it to start a new project.
2. preset items
3. Custom Functions
4. Configure
5. Complete
You can see, UI is actually with the command is the same, but the operation can be visualized.
That's all the contents of this article.