1. Brief introduction of Vue.js
Vue is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications ( SPAs ) when combined with a modern toolchain and various supporting libraries .
2. Build Vue scaffolding
1. Import directly with the <script> tag
Directly download and import with <script> tag, Vue will be registered as a global variable.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Install Vue via NPM
NPM installation is recommended when building large applications with Vue. NPM works well with module bundlers like webpack or Browserify. At the same time, Vue also provides supporting tools to develop single-file components.
Enter the following command in the Cmd command line window to install Vue scaffolding.
npm install @vue/cli -g
or
cnpm install @vue/cli -g
Of course, the premise is that npm or cnpm has been installed and configured. If not, you can see the blog post: Node.js installation and configuration (detailed steps)
Execute cnpm install @vue/cli -g as shown below:
2.2 Check the installed Vue version
Enter vue -V in the cmd command line window to check whether @vue/cli is installed successfully
vue -V
As shown in the figure below, the vue scaffolding is installed successfully
3. Install webpack and webpack-cli
1. Install webpack
Since the version of webpack5 and above has changed a lot, if you use vue3 to create a vue project, the version of webpack4 is more compatible with each other. Install [email protected] version here, the command is as follows:
cnpm install webpack@4.42.0 -g
After the installation is successful, the cmd command line window is as shown in the figure below:
2. Install webpack-cli
In addition: Since the version of webpack needs to be used together with webpack-cli, execute the following command to install webpack-cli:
cnpm install webpack-cli -g
After the installation is successful, the cmd command line window is as shown in the figure below:
3. Check whether the installation is successful
Enter the following command in the cmd command line window:
webpack -v
As shown in the figure below, webpack and webpack-cli have been installed successfully.
4. Create a new default Vue project
1. Create a project
First enter the [E:\codes\web] path (created here under E:\codes\web, please change according to your actual situation), and then enter the cmd command line window of this folder.
Execute the following command to create a Vue project named [hello-vue]:
vue create hello-vue
After clicking Enter, the required files (including node_modules) will be downloaded automatically, as shown in the figure below after the creation is successful:
2. Start the project
First enter the [E:\codes\web\hello-vue] folder, then enter the cmd command line window of this folder and
execute the following command to run the project:
npm run serve
As shown in the figure above, the project starts successfully. Open http://localhost:8080/ in the browser to visit, and the effect is shown in the figure below:
1. Brief introduction of Vue.js
Vue is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications ( SPAs ) when combined with a modern toolchain and various supporting libraries .
2. Build Vue scaffolding
1. Import directly with the <script> tag
Directly download and import with <script> tag, Vue will be registered as a global variable.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Install Vue via NPM
NPM installation is recommended when building large applications with Vue. NPM works well with module bundlers like webpack or Browserify. At the same time, Vue also provides supporting tools to develop single-file components.
Enter the following command in the Cmd command line window to install Vue scaffolding.
npm install @vue/cli -g
or
cnpm install @vue/cli -g
Of course, the premise is that npm or cnpm has been installed and configured. If not, you can see the blog post: Node.js installation and configuration (detailed steps)
Execute cnpm install @vue/cli -g as shown below:
2.2 Check the installed Vue version
Enter vue -V in the cmd command line window to check whether @vue/cli is installed successfully
vue -V
As shown in the figure below, the vue scaffolding is installed successfully
3. Install webpack and webpack-cli
1. Install webpack
Since the version of webpack5 and above has changed a lot, if you use vue3 to create a vue project, the version of webpack4 is more compatible with each other. Install [email protected] version here, the command is as follows:
cnpm install webpack@4.42.0 -g
After the installation is successful, the cmd command line window is as shown in the figure below:
2. Install webpack-cli
In addition: Since the version of webpack needs to be used together with webpack-cli, execute the following command to install webpack-cli:
cnpm install webpack-cli -g
After the installation is successful, the cmd command line window is as shown in the figure below:
3. Check whether the installation is successful
Enter the following command in the cmd command line window:
webpack -v
As shown in the figure below, webpack and webpack-cli have been installed successfully.
4. Create a new default Vue project
1. Create a project
First enter the [E:\codes\web] path (created here under E:\codes\web, please change according to your actual situation), and then enter the cmd command line window of this folder.
Execute the following command to create a Vue project named [hello-vue]:
vue create hello-vue
After clicking Enter, the required files (including node_modules) will be downloaded automatically, as shown in the figure below after the creation is successful:
2. Start the project
First enter the [E:\codes\web\hello-vue] folder, then enter the cmd command line window of this folder and
execute the following command to run the project:
npm run serve
As shown in the figure above, the project starts successfully. Open http://localhost:8080/ in the browser to visit, and the effect is shown in the figure below: