一、前期注意事项
特别注意：本工程需要使用管理员模式打开命令行窗口(dos窗口)，否则很有可能创建将不会成功！在系统启动菜单中输入cmd，选择以管理员身份运行。
进入dos窗口后左上角会显示管理员三个字，这时才是管理员身份，请各位牢记。
注意如果打开的命令行或终端不是管理员模式，则后续工程可能会创建不成功。
如需以后打开命令行窗口都是管理员的话，解决方式，请参考如下：
| 因系统版本不一样，以下步骤不一定和我写的一样，自己灵活调整打开window系统的“本地安全策略”， 一、如果家庭版系统没有“本地安全策略”的，可参考如下方式添加“本地安全策略”（本文档末尾也有方式说明）： 教你如何在win11家庭版中添加【本地安全策略】-优快云博客 1、cmd运行gpedit.msc，
2、对应下图更改选项后重启电脑即可，后续无论是从哪进去的cmd，或者bat运行的脚本，都默认已管理员权限运行。
二、有本地安全策略，打开本地安全策略的方式如下：
|
二、Node-V18安装与配置
下载地址https://nodejs.org/dist/v18.14.0/node-v18.14.0-x64.msi
-
node安装
选择路径时不要放在C盘，并且在其它盘下时文件夹不要有中文，不要有空格,本案例安装目录是在D:\ProgramSoft\node （建议大家都这样设置，后面的相关设置我都是用这个文件夹路径，d盘下没有ProgramSoft文件夹的，请先创建该文件夹）
安装完成后进行环境变量的设置，查看与设置环境变量如下图所示：
（新建系统变量NODE_HOME）
编辑系统变量path，新建变量值：
文字内容如下：可直接复制
%NODE_HOME%
%NODE_HOME%\node_modules
%NODE_HOME%\node_global\
设置完毕后，重新打开dos窗口，并用node -v 和npm -v 查看版本，能出来即表示安装成功
-
修改NPM全局模式的默认安装路径
一般情况下，我们安装 Node.js环境，程序会自动把 NPM全局模块的路径设置在系统盘（通常是在 c盘下），我们在项目开发阶段不建议全局路径设置在系统盘，不但会影响到电脑的性能，而且还很不安全。可以通过以下命令来设置下载的全局路径目录:
在命令行窗口中输入命令，查看当前配置：
npm config ls
如果是第一次使用NPM安装包的话，在配置中只会看到prefix的选项，就是NPM默认的全局安装目录。
- 在D:\ProgramSoft\node目录下新建两个文件夹：node_global 和node_cache,
注意：如果你的node安装目录不是这个，请将路径改成你自己的
效果如图：
- 以管理员身份打开命令提示符，执行下面两条命令：
npm config set prefix "D:\ProgramSoft\node\node_global"
npm config set cache "D:\ProgramSoft\node\node_cache"
注意：如果你的node安装目录不是这个，请将指令中的路径改成你自己的
执行成功后，可以使用npm config ls命令查看配置的结果，效果如图，不一定一样，但至少可以看到图片中红圈中的内容：
使用npm root -g查看下载包的默认存放路径位
-
设置npm源，把默认源设置为淘宝镜像：
npm config set registry https://registry.npm.taobao.org
查看修改后的配置可使用npm config ls指令再次查看配置，此时原来的地址https://registry.npmjs.org/已改成taobao地址
如taobao源不好用时，可以尝试更改地址如下：
npm config set registry https://registry.npmmirror.com
三、创建工程
注：不要将工程文件夹创在node安装目录中，也不要建在c盘，放在别的盘。工程文件夹的名字不要有中文，不要有空格，也不要用纯数字做文件夹的名字
本案例中的工程目录为：D:\work\vswork\test
-
以管理员身份打开命令行窗口，进入到D:\work\vswork\test目录，开始创建VUE项目，输入指令：
npm init vite@latest demo1 -- --template vue
注：demo1是项目名，因版本可能会先出现如下两个界面选项，请移动上下箭头进行我们选择vue和javascript后回车继续，如果没有出现这两个界面就会直接出现第三个界面。
可能是会在第三个出现的界面如下：
-
进入demo1目录（cd demo1），并输入
npm install
-
在demo1目录下，安装elementPlus组件
npm install element-plus --save
npm install @element-plus/icons-vue
-
在demo1目录下，安装axios组件
npm install axios
npm install qs
-
在demo1目录下，安装vue-router
npm install vue-router@4
-
在demo1目录下，安装vuex或pinia（目前只装vuex即可）
npm install vuex --save
注：以后如需要安装pinia，指令为--npm install pinia
-
在demo1目录下，安装sass模块（又名scss，是css预处理器）
npm install sass --save-dev
- 更改端口号（可选）
用Visual Studio Code或HBuilder X打开工程目录下的package.json文件，找到scripts元素，并更改元素信息如下：
"scripts": {
"dev": "vite --port 8085",
"build": "vite build"
}注意是更改scripts中dev元素的vite属性值，在vite后加入 --port 8085。不是在文件末尾添加该元素信息
-
配置vite.config.js
设置包含运行时编译器。需要要运行时的模板编译 (例如，DOM 内 模板或通过内联 JavaScript 字符串的模板)，就需要配置该选项。用以下内容直接覆盖原来的内容即可。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve:{
alias:{
'vue': "vue/dist/vue.esm-bundler.js",
'@': path.resolve(__dirname, "./src"),
}
}
})-
配置main.js
用以下内容直接覆盖原来的内容即可。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'
const app=createApp(App).use(ElementPlus)
// 统一注册el-icon图标
for(let iconName in ElIcons){
app.component(iconName,ElIcons[iconName])
}
app.mount('#app')-
启动服务器
npm run dev
- 打开浏览器，访问http://localhost:5173/
至此，工程创建完毕！以下步骤以后学到相应知识点时再进行配置
- 使用Pinia与路由示例(以下步骤以后学到相应知识点时再进行配置)
- 添加pinia
- 在src目录下添加store文件夹，并添加CounterStore.js文件，如图所示：
-
- 编辑CounterStore.js文件，内容如下：
import { defineStore } from 'pinia'
//第一个参数"store1"是本store在应用中的id，该id在应用中是唯一的。
//应用可以有多个store
export const useStore = defineStore(
'storeExample',{
state: () => {
return{
count: 0,
title: "This is a example for Pinia"
}
}
}
)- 修改及添加vue页面
- 修改HelloWorld.vue
<template>
<h1>Hello World</h1>
<el-button @click="store.count++" type="success" >
From world: {{ store.count }}
</el-button>
</template>
<script>
import { useStore } from '../store/CounterStore'
export default {
data() {
return {
store:useStore()
}
}
}
</script>
<style lang="scss">
:root {
--el-color-success: #ffd240;
}
</style>-
- 添加HelloChina.vue
<template>
<h1>Hello China</h1>
<el-button @click="store.count++" type="primary" >
From China: {{ store.count }}
</el-button>
</template>
<script>
import { useStore } from '../store/CounterStore'
export default {
setup(){
const store=useStore()
return{
store
}
}
}
</script>
<style lang="scss">
:root {
--el-color-primary: #409eff;
}
</style>- 添加路由
- 在src目录下创建router文件夹，并添加index.js文件
-
- 编辑index.js内容如下：
import {createRouter,createWebHistory} from 'vue-router'
import Hello from '../components/HelloWorld.vue'
import China from '../components/HelloChina.vue'
const routes=[
{path:'/',component:Hello},
{path:'/china',component:China}
]
const router=createRouter({
history:createWebHistory(),
routes
})
export default router- 修改App.vue
<template>
<router-link to="/">Hello world</router-link>
<el-icon :size="20">
<fries />
</el-icon>
<router-link to="/china">Hello china</router-link>
<hr>
<router-view></router-view>
<hr>
<div>
count:{{ store.count }} title:{{store.title}}
</div>
</template>
<script>
import { useStore } from './store/CounterStore'
export default {
data() {
return {
store:useStore()
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>- 修改main.js（直接覆盖原内容）
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
import * as ElIcons from '@element-plus/icons-vue'
import router from './router'
import { createPinia } from 'pinia'
const app=createApp(App).use(ElementPlus).use(router).use(VueAxios, axios).use(createPinia())
// 统一注册el-icon图标
for(let iconName in ElIcons){
app.component(iconName,ElIcons[iconName])
}
app.mount('#app')- 附录：添加本地安全策略
- 在c盘或d盘的根目录下创建一个ok.txt文件，复制如下内容
| @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >List.txt dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientTools-Package~3*.mum >>List.txt for /f %%i in ('findstr /i . List.txt 2^>nul') do dism /online /norestart /add-package:"C:\Windows\servicing\Packages\%%i" pause |
- 保存后，更改文件名的后缀名为cmd，如图所示
- 以管理员身份打开cmd窗口，进入到该ok.cmd文件存在的目录，输入ok.cmd回车后即可完成安装。安装过程根据提示进行即可。
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
