Vue Study [1]: Vue Setup
Description
The article for vue.js Setup.
Original post link:https://www.cnblogs.com/markjiang7m2/p/10783456.html
Source code:https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Web
Development Environment Preparation
Node.js
If we want to develop Vue.js, we should install Node.js firstly.
Actually I have installed Node.js in my environment when I started my another repository TaxSystem, but without any note to mark down the action. I will write down the procedure here.
1.Install Node.js
Download Node.js install package from nodejs.org and install. You should select your version.
Set environment variables
And then you can input the command line to verify if Node.js is installed successfully.
node -v
npm -v
2.Environment Configuration
The node cache files and global modules will be installed and saved into C:\Users\xxx\AppData\Roaming\npm
by default. We have better to change the path as our system disk space is limited.
Create 2 folders node_global
& node_cache
Reset the configuration in CMD.
npm config set prefix "D:\Mark\nodejs\node_global"
npm config set cache "D:\Mark\nodejs\node_cache"
Add the environment variables
vue-cli
Install vue-cli
as a global module.
npm install -g vue-cli
Input a command line to verify if vue-cli
is installed successfully.
Setup a vue project
Use Visual Studio Code to open the folder you want to create the project in.
Click Ctrl
+ ~
to open the Terminal.
Input the below command line to new a project based on webpack and select the setting as requested.
vue init webpack projectname
Config the PORT No.
Enter the project folder and run the project
cd Vue.Web
npm run dev
Then we can view the Website in browser.
We can also build the project
npm run build .
vetur
It is an extension Vue tooling for VS Code.
1.Install vetur
Click Ctrl
+ P
, input ext install vetur
, then install the extension.
2.Add the below in User settings
Click Ctrl
+ Shift
+ P
, input Preferences: Open User Settings
.
Add the below in User settings
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
Build Setup command line
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
来源:.Net框架学苑 博客:https://www.cnblogs.com/letyouknowdotnet/ 本文版权归原作者和博客园共有,欢迎转载,但未经原作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究责任的权利。 |
![]() |
我们学的不仅是框架,更是梦想!更多技术文章汇总,请查看www.letyouknow.net
|