First, please install node and npm in advance
If you don’t have installed it, you can search on Baidu or search in the forum!
Tip: Enter node -v (there is a space between node and -v) and npm -v (there is also a space) on the command line to view the current node and npm versions.
Create a vue project
1. Create a project folder and remember the folder path, such as mine is F:\AppCode
2. Open the cmd command and enter the folder path F:\AppCode just created through the cd command.
enternpm install -g cnpm –registry=Install Taobao mirror
3. Continue to enternpm install -g vue-cliInstall global vue-cli, enter vue in the command line, and the information about vue is shown that the installation is successful.
4. Inputvue init webpack testA new project to install the webpack template (test is my project name and folder name, but it can be modified according to actual changes. If there are capital letters, you will be required to re-enter the project name, so it is best to enter lowercase to ensure that the two are consistent, which is convenient for operation) At this time, return all the way
5. Enter cd test to enter the test foldernpm install
6. Inputnpm run dev Run the project, the command window is given at this timehttp://localhost:8080Open it in the browser, and the vue project creation is completed
Introduce elementUi
1. Continue to open cmd and use the cd command to enter the project folder like we created F:\Appcode\test
2. Inputnpm i element-ui -S) Install elementUi (note spaces and capital S)
3. After the installation is completed, use WebStorm or HBuiderX to open our project, find the file in the src directory and modify it to: 3 new statements are added to reference elementUI
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in with an alias.
import Vue from ‘vue'
import App from ‘./App'
import router from ‘./router'
import ElementUI from ‘element-ui' //new
import ‘element-ui/lib/theme-chalk/' //new
= false
(ElementUI) //new
/*eslint-disable no-new */
new Vue({
el: ‘#app',
router,
components: { App },
template: ‘'
})
4. At this time, elementUI has been imported successfully. You can introduce a button in src/components/ to see if the style is successful.
{{ msg }}
Essential Links
<el-button type="primary">Main button</el-button> //This iselementProvided buttons
5. Run it: cmd enter the project folder F:\AppCode\testnpm run dev (webstorm can use the shortcut key alt + F12 to quickly execute npm run dev, HBuiderX can click to run to the browser icon (a bit like the one with the play button) to quickly execute npm run dev so that you don't need the cd command to enter the project folder) 6. But at this time you will find that it will report/docs/rules/indentmistake! ! ! ! ##/docs/rules/indentsolve
The reason for the error is that Vue is strict with syntax, while eslint is a syntax checking tool, which has extremely strict requirements on syntax, so it is wrong.
The solution is to close eslint's syntax rules and findbuild/Just comment or delete the eslint-related syntax.
1. Find the build folder under the test folder
2. Select the buildThe file enters modification, and comment out the statement in…(? [createLintingRule()] : []).
3. You can also copy the following content directly to replace my content:
‘use strict'
const path = require(‘path')
const utils = require('./utils')
const config = require('…/config')
const vueLoaderConfig = require('./')
function resolve (dir) {
return (__dirname, ‘…', dir)
}
const createLintingRule = () => ({
test: /.(js|vue)$/,
loader: ‘eslint-loader',
enforce: ‘pre',
include: [resolve(‘src'), resolve(‘test')],
options: {
formatter: require(‘eslint-friendly-formatter'),
emitWarning: !
}
})
= {
context: (__dirname, ‘…/'),
entry: {
app: ‘./src/'
},
output: {
path: ,
filename: ‘[name].js',
publicPath: .NODE_ENV === ‘production'
?
:
},
resolve: {
extensions: ['.js', ‘.vue', ‘.json'],
alias: {
'vueKaTeX parse error: Expected 'EOF', got '}' at position 58: …ve('src'), }̲ }, module:…/,
loader: ‘vue-loader',
options: vueLoaderConfig
},
{
test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 144: …lient')] }̲, { …/,
loader: ‘url-loader',
options: {
limit: 10000,
name: (‘img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?KaTeX parse error: Expected 'EOF', got '}' at position 157: … } }̲, { …/,
loader: ‘url-loader',
options: {
limit: 10000,
name: (‘fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: ‘empty',
fs: ‘empty',
net: ‘empty',
tls: ‘empty',
child_process: ‘empty'
}
}
4. Run again: cmd enters the project folder F:\AppCode\test Run npm run dev (webstorm can use the shortcut key alt + F12 to quickly execute npm run dev, HBuiderX can click to run to the browser icon (a bit like the one on the play button) to quickly execute npm run dev, so that you don’t need the cd command to enter the project folder to pull). The error resolution command serial port gives the following porthttp://localhost:8080Open it in your browser.
5. You can see that the main button we added appears on the screen, and the operation is completed!
Summarize
The above is the method of building projects based on Vue and Element-Ui introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!